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:

1 Like

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.