Jump to content
Search Community

Running a function in between Timeline 'steps'

Ginger Soul test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.'

 

Thanks!

 

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

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.
×
×
  • Create New...