Jump to content

Ginger Soul Records

Running a function in between Timeline 'steps'

Recommended Posts

Hey Greensockers, 


Got a question that I think has a pretty simple answer. I'm using a Timeline to animate three horizontally-aligned targets that share a common class (myclass), e.g.


var tl = new TimelineLite();

tl.from('.myclass', 0.5, {left:100, opacity:0});


This works fine on desktop, when these elements are horizontally aligned and all enter a user's viewport simultaneously. 


On mobile, the elements stack, so when the Timeline fires, you only see the first element animate and 'miss' the other two animations as the target elements are below (outside of) the viewport. 


Here's my question: Is there a way to pause the Timeline after each 'loop' if its target isn't in the mobile viewport (aka run a function after each loop to check this), and resume the Timeline if that element enters the mobile viewport?


I'd be combining this with jQuery Waypoints to watch for 'entering the viewport' events, I'm just curious if/how you can run functions during a multi-target timeline that has one 'step.'




Dave Bloom




Link to comment
Share on other sites

Hey Dave, 


I've been meaning to check in with you, and what you're working on. 


Do you think you can make a demo so we can get a better understanding of what's going on?


I'm thinking that you'll need 3 separate animations, and/or maybe a media query watcher to create different timelines based on the size.


For triggering viewport animations, I find using the Intersection Observer API to be pretty good. There's also a polyfill.


See the Pen WaLjNL by osublake (@osublake) on CodePen




  • Like 4
Link to comment
Share on other sites

@OSUblake Great to hear from you, was hoping you'd chime in :)


Happy to create a pen for this - it pertains to the functionality of an animation plugin I've been working on for a while. Think you'd dig it. 


Meanwhile, I'd love to catch up - I think we're still Skype contacts, hit me up!



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.