Jump to content
Search Community

One page grid & multiples timelines execution (using .onScreen() as a trigger)

Kezart test
Moderator Tag

Recommended Posts

Hi, 

I'm facing a problem that i can't overcome.

 

I'd like to execute multiple timeslines at the same time when a div enters the viewport, but can only manage to fire one at a time. And of course the animations have to reset on leave, so that they can be played again (which is done, but is not instantaneous so it's a problem for longer timelines and thus need improvements if possible).

 

How can this be accomplished ?

(also if you have a in-house solution instead of using .onScreen(), i'll gladly use it)

(GSAP related JS starts at line 163 "// ANIMATIONS HERE")

 

Thank you in advance

See the Pen bGROOmm by Kezart (@Kezart) on CodePen

Link to comment
Share on other sites

Hi Kezart,

 

There really isn't an equivalent to OnScreen with GSAP, and we really don't have the resources to help with logic issues. Please see the Forum Guidelines.

 

I think your best bet might be to attach your animations to your elements. Then you can play/pause/restart/reverse them on demand.

 

let myElement = document.querySelector(".foo");

myElement.animation = gsap.timeline()
  .to(myElement, { x: 100 });

...
myElement.animation.restart()


...
myElement.animation.reverse()

 

Link to comment
Share on other sites

Hi @Kezart

 

You had so much code in your demo, I didn't even realize you were using the ScrollToPlugin. That's we ask for a minimal demo, so we can focus on the issue on hand without any other code and styling distractions.

 

Since you're just scrolling to change the position, you should be able to leverage ScrollTrigger to play and reverse animations when you scroll to a certain section on your page.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

  • Like 1
Link to comment
Share on other sites

Hi,

 

So in the end i changed a bit the way i call the timelines (now they can run simultaneously) , and created a function to clear the timeline props from the dom to "reset" the timelines (called on 'leave'). It works fine like that

 

function clear(selector) {
    var tl = gsap.timeline();
    tl.to(selector, 0, {clearProps:"all"});
}

edit : also codepen has been updated if anyone wanna take a look

Edited by Kezart
codepen updated 
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...