Animation in slider

How To
1

Hello,

I have a Nestable Slider and would like to animate an element of the slider when it becomes visible. When I use enter the viewport, it seems that the animation also starts on slides that are not visible. Is there a way to start the animation when the slider is visible?

I also would like the animation to be kicked off every time the slide is visible.

Thanks

Philippe

2

You need to use the Slider Events: Bricksforge Panel – Bricksforge Docs

3

Thanks Daniele. I have just scratched the surface with Bricksforge. It looks very powerful.
I manage to do the animation that I wanted. In order for the animation to happen every time the slide is displayed, I am using the ‘Restart’ animation option. However, during a fraction of a second, when the slide is displayed, the elements appear in the final position. Is there a way to avoid this to make the animation smooth? (example: https://conceptionflamm.localwebsolutions.ch/).
Thanks,
Philippe

4

You could set the initial value with CSS, for example visibility: hidden to hide the elements on page load.
Or, use a “from” or “fromTo” animation. Then the initial state will be set earlier.

5

I am not able to get this working.

I have a class with a simple animation of text characters (stagger characters).
I’ve added the class to heading text within each slide of the nestable slider.

The problem is the animation happens just once on page load for the first slide and then all the rest of the slides the text is already animated and visible, it doesn’t run again.

So I set the timeline to have a custom trigger. Then I set up a custom event for the “On Slide Visible” event. I tried others as well like “On Slide Moved”.
Then for the trigger I have it run the GSAP Timeline of the correct timeline, telling it to “Restart” and “Animate All”.

I have changed all kinds of different settings in here but I can’t get the animation to trigger and restart no matter what I change. Even the setting to “Console Log > Event” doesn’t seem to do anything because nothing outputs to the console and I can’t even figure out if the event is triggering at all or if Forge is tracking with it.

Note that the normal interactions with animations built-in to Bricks work fine with slides. If I use a standard animation from Bricks in the slide using a class, it works and animates each time the slide changes. But the Forge animations I cannot get to animate when the slide changes.

I can’t find a tutorial or anything step-by-step to see how it works, but it seems right to me. It’s like the trigger just isn’t being triggered.