Help animate in a slide, nothing works!

How To
1

I’ve spent hours and hours on this and it feels like it should be so much simpler, I must be missing something!

I have a normal Bricks nestable slider that has a few slides with background images and text.

For the main large text, I want to use the character stagger effect when the slide is visible.

This is what I’ve done to try and create this.

I made a Timeline with a Pageload trigger. The selector I’ve done two ways; one is to select the entire slide “.hero-slider” and the 2nd method was selecting the individual slides “.hero-slider__slide”. I’ve set “Handle triggers separately” as both on and off but it doesn’t seem to make a difference how this is arranged.

The animation is a “From” and targets the heading text “.slide__heading” and sets the stagger effect.

This works on page load for the first slide. Of course, no other slides have the effect, the text is just already visible and nothing animates.

Here is the json export of this timeline: Dropbox

Next I created a custom Event and used “On Slide Visible” for the event, and set the slide ID to target it.
When the event fires, I use GSAP Timeline and select my stagger timeline I created above. I’ve used both “Animate Trigger” and “Animate All” but I just can’t get it to work right.

What can happen is that when the slider moves, the text is already visible, then 100ms later or so, it disappears, then a longer 2 or 3 seconds and then finally the animation runs.

I have no delays on this anywhere, the timeline has no delay, the event has no delay and the action settings have no delay. Yet there is a delay before the slide text disappears and a very long delay before it animates.
The prevent FOUC setting doesn’t change anything.

The crazy part is that if I use my event and just do a different action like play a confetti, it runs perfect. The slide changes, the confetti pops. So why is it I can’t make my animation run again properly without delays and without showing the text first and so forth? Obviously the timeline may be set up wrong, like how it uses Pageload. But if I don’t use pageload, nothing happens on page load! If I just do custom trigger, it won’t run the first time.

I’m missing something because I don’t know why it should be this hard to simply run an animation when the slide changes.

Here is the json for the custom event. Dropbox

The two exports are just where I had the settings at the time I exported, but I’ve changed settings around 6 ways from Sunday.

What is the trick?

2

Hey! :slight_smile:

Even if that sounds strange, it totally makes sense.

The first ‘On Slide Visible’ event will make your animation trigger visible. The ‘from’ animation will then no longer have any effect, as the initial status (invisible) has already been resolved.

You could solve this with another event, with which you manually reset the content to the initial state when sliding, e.g. to autoAlpha: 0. This helps to ensure that when the user clicks on ‘Next’, the initial state is set again, which affects the next slide. A delay may be necessary in order to implement this smoothly and not to set the visible content to invisible.

3

Turns out, the “On Slide Move” event is much better. It triggers almost instantly when the slide begins to move. Then I could set the animation to “Restart” and with FOUC, the text disappears fast enough where we don’t see it by the time the slide is coming into view.

To solve various Console error messages about elements not being found, I changed my timeline to only target the heading text directly. Then I turned on the Array feature.
Without this, the event would often throw errors in the Console about object not found or whatever. Previously, I had the target as the Slider element itself, with the heading text as the inner target, but this appears to break the event since the event doesn’t really know “which” heading text is the current visible one.

I don’t know how the magic works behind the scenes, but this essentially fixed it:

  1. Make the timeline target the animated element directly. Not the slides or the master slide element. I target them with a class, which means it will target all of them, but this is ok since only one slide is visible at a time anyway. It should trigger on Pageload so that the first slide visible on page load will be animated. If you use a “custom trigger”, it won’t animate.

  2. Turn on the “As Array” feature to group them and treat separately. Not sure the magic behind this but it helps with delay and timing.

  3. In the custom event/trigger, use “On Slide Move” rather than Visible. Visible will work, but it means the animation won’t begin until the slide comes into view and fully stops, which is a terrible delay on the animation and you’ll see the visible content before it resets.

  4. Set the timeline to “Restart” and it will simply rewind itself and play normally.

  5. Use FOUC on the timeline to help the animation not show content before it animates. Not sure if this is necessary but I ended up using it.

Finally, after 4.5 hours of messing around with settings, I found a combination that works for making the animation run when the slides change!

It feels like it should not be this difficult!