Streaming live at 10am (PST)

Way to stagger repetitions of the same page load animation?


#1

Hi,

I want to apply the same page load animation to 8 full page photographs at 5 second intervals. Is there a way of doing this that does not involve duplicating the animation and adding +5 seconds delay to each one? (I have tried using the slider but the animation is causing display problems when applied to elements inside slides.)

Thanks,

John


#2

Hi,

I didn’t see your read-only link posted here. Without seeing it, I would consider simply adding a delay action on the “Front” of each animation.

%40johnsherwin

Using this as the first stage of each, you may even be able to add each page photo in the same interaction. All 8 photos can be separated by this delay, then all fit in 1 animation.


#3

Hi Gary, thanks for coming back to me. I didn’t post a read only link as I am building at the moment and not quite ready I am afraid, sorry for inconvenience of that. Advice in the dark!

My issue is that the animation includes 20 steps, there are 10 photos, so adding them all into one animation creates an animation with 200 steps which is a bit unwieldy.

I can dupe the animation but thought it seemed inefficient. However I think this is the only choice so I have been working on that.

I wondered if there was a way to trigger the 1 page load animation applied to multiple elements adding the delay in for each element without duplicating the animation, the UI doesn’t seem to allow it, I wondered if there was a clever code way of doing it!

At the moment, I have duped the animation and added a +10 delay incrementally to each which works fine but was a lot of work!

The other thing I am wondering is if there is a way of triggering the page load animations a second time to create a loop?


#4

Hi John,

I understand. Yes with a lot of elements that need animations, in IX2 you’ll need to add the time gap individually because the interactions are contained in the same triggered panel. It means they all are really the same interaction, they just happen at different times within the triggered effect.

In IX1, it’s a little easier to use timed gaps because the triggered effect is actually held individually within the entire animation. Yet, you have calculate in your head adding seconds. This was named “New Step”.

Not sure if you want to work that out in IX1, but it’s probably easier to complete for your desired animation. Again, in my opinion, using IX2 works best when you “Duplicate” one animation, then adjust for any changes. It does take a little more work than IX1 Legacy but overall, you get to the same point. It’s personal preference.

Let me know if you need any help.


#5

Thanks Gary, I did duplicate the animation and add a step that staggers the starting of it. I was concerned that there would be some code bloat by having a dupe of the same animation 10 times instead of once, but maybe it is not that big a deal, the home page seems to be about 1.1mb on Pingdom which I don’t think is too bad. I will add a small loading animation. Most of the data is due to images rather than CSS anyway.

Appreciate your help.

John


#6

YAY! Awesome, not a problem. I really like IX1 for this type of animation. I’m glad it worked out.