Probably missing something obvious, here’s the problem/question:
Setting up an animation that will feature a grid of 9 html widgets (in 3 rows of 3) - the concept is that the first row (main timeline) becomes visible first, with the second and third rows animating as they scroll into view (on enter viewport starts their timelines.
The animation is working correctly, but the problem is that the second & third timelines are both showing the html widgets even though they are set to opacity 0 on the main timeline and they each have opacity set to 0 on their individual timelines until their animations begin at 1 and 1.5 seconds.
What am I missing? The second and third rows should not be visible until they scroll into view.
Here is the file if anyone cares to take a look and point me in the right direction.
I just dragged your animations in each Timeline to the beginning, so they were all 1 sec in length.
Went to your Main Timeline and highlight everything and decreased the opacity to 0%.
• Deleted your opacity keyframes.
• then I placed the timeline playhead at 0 secs (frame 0) and made sure the opacity was set to 0%
• pressed record
• moved the timeline playhead to 1 sec (frame 30)
• increased the opacity to 100%
Repeated this for the other timelines (make sure the previous row is visible throughout the entire timeline)
now you should have an animation for opacity and your original scale transform animation
• Next, I moved your HTML widgets down a little, as I’m using a laptop, so when previewed you can only see the first row.
