Foundation Animate stack conflicting with Timeline stack?

Hi everyone, I’m noticing a strange conflict when I use @Elixir 's Timeline stack on a Foundation page.

I’ve used Foundation Animate stacks throughout this landing page, and all the animations were super smooth. Then, I added a Timeline stack to the page and now all the animations lack a fade effect (i.e. I used the “Fade in up” setting, but it looks like the stack only moves in without fading in).

If I remove the Timeline stack, the animations work perfectly again.

This is what the page looks like with the Timeline stack: https://acts.ca/kota/

This is what the page looks like without the Timeline stack: https://thesimplersite.com/kota/

Is there any way to make the animations work properly while also keeping the Timeline stack? I love the stack, but if it messes up my animations, then I’ll have to stop using it :frowning:

What happens if you turn off Timeline’s animations and put the whole thing inside a Foundation Animate stack?

Rob

Hi Rob, thanks for the suggestion…however, it didn’t seem to make a difference, unfortunately.

I’ve decided to abandon Elixir’s Timeline stack and replace it with 1LD’s Responsive Timeline stack, which works flawlessly with Foundation animations :slight_smile:

I looked at this for a while but could not find out what Timeline was doing. Sorry. Glad that you found an alternative.