Streaming live at 10am (PST)

Animate element in slider


#1

My apologies for asking an old question in the forums, but I haven’t been able to find a clear resolution.

I have a div in side of a slide. I’d like the div to slide-right into position just .5 seconds after the slide has stopped. The idea is to feel like the div is just a wee bit slower than the rest of the slide.

I tried interactions but seems I am not using the right trigger. Which Element Trigger do I use? Or is it page load instead?


#2

Hi @arnolfo

I don’t think it’s been asked that much, I did a quick search and couldn’t find an easy answer for you, so hopefully this helps.

  1. Select Slide 1 and choose Slider in the interaction panel under the element trigger.
CloudApp

Choose start animation under Slider in view
CloudApp

You then need to give the div a starting point. So set right 100px (example) and opacity 0% ands check the set as initail state button
CloudApp

Then add the appearance of the div and give a delay of 0.5 seconds which you wanted.
CloudApp

Once this is done, when the slide 1 loads, it will slide the div in 0.5 seconds after the slider loads.

To repeat this, you need to do the reverse for the Slider out of View trigger.
Here’s a quick way to duplicate and apply.

CloudApp

Any issues, then let me know!


#3

So I had to select Slide01, then add the animation. This is where I was getting tripped up. I was starting by selecting the div inside Slide01 - which did not give me the “Slider” option in the interaction panel under trigger.

As you have shown, the animation works. And to add, I had 2 more slides thus had to create 4 more animations, two (in and out) for each div in each slide.

Thank you Markos.


#4

You’re welcome @arnolfo , glad it worked for you.