Lot’s of questions about this are popping up so I’m hoping that by sharing my findings, we can find out where most of us are going wrong. Sometimes I think there might be a bug, sometimes (mostly) I think my brain just can’t figure it out haha. By finding out which way is the “correct” one, we can save you some headache on support and have some kinda overview of what works and what doesn’t in here.
Also I just needed to keep track of what I’ve tried so I don’t run in circles and figured here would be the best place
Goal: Every page should have a unique entry and exit animation. Meaning every page has elements with different classes to be animated in and out.
Here are my findings
Attempts using custom GSAP code
Attempt 01:
- Animation applied to all routes.
- Entry and Exit works.
- Animation on pageload doesn’t work.
- Obviously, setting it to all routes, means every pages animation would have to live in 1 codeblock.
Attempt 02:
- “To Route” set to a page.
- Entry works, Exit doesn’t.
- Animation on pageload doesn’t work.
Attempt 03:
- “FromRoute” set to a page.
- Entry works, Exit doesn’t.
- Animation on pageload doesn’t work.
Attempt 04 (Most succesful):
- Combination of attempts 2 & 3
- Entry and Exit work
- Animation on pageload doesn’t work.
Attempts using custom Timelines in the BF Panel
Entry Timeline:
Exit Timeline:
Attempt 01:
- “ToRoute” set to page
- Entry and Exit don’t work.
- Animation on pageload works.
Attempt 02:
- “FromRoute” set to page
- Entry doesn’t work.
- Exit works ONLY if initial pagevisit is directly to the page. When entering the page again after navigating away, it stops working.
- Animation on pageload works.
Many more attempts:
I’ve tried replicating the success of Attempt 04 (using custom GSAP code) by using all kinds of combinations between two animations. Swapping the In/Out Timeline IDs in the from and/or to animation, only leaving the in or out animation, etc.
So in conclusion, the most success I can see, is using Attempt 04 using custom GSAP code + a timeline in the BF Panel which is set to play on pageload, in case that page is being directly opened.