Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Pete K

Scrolltrigger - trying to use the respective parents as triggers ( multiple instances )

Go to solution Solved by Cassie,

Recommended Posts

Hi, it should be fairly easy to fix ( I think ) ...

I do believe that I am doing everything correctly, so I set a loop, where I look for the closest div/parent with a class ('scrollin-parent') and then use it as a trigger.

But for some reason the class that I am toggling is being attached to the ... parent ( .scrollin-parent ) instead of the actual element ( '.scrollin' instance  )

Have a look at these few lines below nad thanks for your feedback in advance. THANKS !!!!!

 

gsap.utils.toArray('.scrollin').forEach(function(el,index){
 
  var addClass = $(el);
  var containerTrigger = addClass.closest('.scrollin-parent');
  
 
  ScrollTrigger.create({
    trigger: containerTrigger[0],
    start: "top top",
    markers: true,
    toggleClass:"zoom-test",
  });  
 
});  
  • Like 1
Link to comment
Share on other sites

  • Solution

Hey there Pete,

You need the object syntax. By default the class is added to the trigger element.

From the docs.
 

toggleClass String | Object - Adds/removes a class to an element (or multiple elements) when the ScrollTrigger toggles active/inactive. It can be either of the following:
  • String - The name of the class to add to the trigger element, like toggleClass: "active"
  • Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements.
Note that toggleActions don't apply to toggleClass. To have toggle class names in a different way, use the callback functions (onEnter, onLeave, onLeaveBack, and onEnterBack).

 

Hope this helps!

  • Like 4
Link to comment
Share on other sites

Cassie, it worked like a charm. Thanks...  

One more thing here (if I may ) ... Will this solution work with "stagger" paramater at all? 

Here are the updated lines ... I am trying to get the intances receive the class one by one ( in case there are more than two... under one parent ) instead of being animated at once. Thanks for your support - that is amazing !

P. 

 

gsap.utils.toArray('.scrollin').forEach(function(el,index){
 
  var addClass = $(el);
  var containerTrigger = addClass.closest('.scrollin-parent');
  
 
  ScrollTrigger.create({
    trigger: containerTrigger[0],
    start: "top bottom-=100",
    markers: true,
    toggleClass: {targets: el, className: "zoom-test"},
    stagger:1, /// will that work here???
    toggleActions: "play none none reverse",
 
  });  
 
}); 

 

Link to comment
Share on other sites

If the class is animating them I very very strongly suggest you just let GSAP do that instead.

It's what it's for!

(also, no stagger won't work like this)

If you post a minimal demo we can advise better.

  • Like 2
Link to comment
Share on other sites

Thanks !!!

...It sounds good and I have already had done the same with GSAP animations. But in my case the problem was - the animations were jumpy/laggy. The CSS transfroms perform signifcantly better ... As advised, I made a tiny codepen ... 

The goal is to add a class when the parent container reaches the start in the Scrolltrigger. Then the target ( here " .box divs" ) get a new class (".box-after ")  and should change sequentially.  I applied a setTimout while creating Scrolltrigger forEach of the elements ( ".box" divs ).

1. However the trigger  ( ".animatein-parent" ) is not working ...

2. The trigger ( ".animatein-parent" ) should be effective only within one section ... until the scroll reaches another ( ".animatein-parent" )...

 

I believe it might sound messy ... Hopefully it makes sense for you :)

See the Pen OJxQpbM by janek_marcepan (@janek_marcepan) on CodePen

Link to comment
Share on other sites

Hey again!

 

I very much doubt that standard CSS animations would be performing better - GSAP uses inline transforms under the hood so they're basically doing the same thing.

Usually the issues come when people are trying to mix GSAP and CSS - if you have transition durations or easing set on elements in your CSS it can conflict with what GSAP is trying to do.

Here's a little demo showing how I'd approach this. Loop through the sections, then add a staggered tween for each section.

See the Pen MWEQmeZ?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

2 hours ago, Pete K said:

But in my case the problem was - the animations were jumpy/laggy. The CSS transfroms perform signifcantly better

Got a minimal demo that shows CSS performing significantly better? The demo you provided doesn't seem to do that and there are errors in both the HTML and JS panels. I wonder if your JS animations are performing worse because you've got errors in there. It's very rare indeed that CSS outperforms GSAP in any noticeable way and if that is the case, it's almost always easily solvable by adding something like will-change: transform or some other minor tweak. I'm very curious to see a demo that conclusively shows the CSS outperforming GSAP in a perceptible way. 

  • Like 1
Link to comment
Share on other sites

Let me test the gsap-only way and see... Sorry for the errors in the js+html panels - I am fresh, and still learning. As for the performance. In the website I am working on I have a hero banner ( 100vh +100vw ) with some css animations. As I would scroll down past that banner , some other animations were triggered ( this time those were gsap only ) ... and that is where all would become jumpy. After I would scroll down to the bottom and get back to the top suprisingly all the animations would become smooth ... And that is why I decided to try adding classes through Scrolltrigger. This approach produced smoother results , expecially in the first run of scrolling down... 

Anyway thanks for your remarks - I do appreciate this. I love GSAP and not giving up :)

 

Link to comment
Share on other sites

3 hours ago, Cassie said:

I very much doubt that standard CSS animations would be performing better - GSAP uses inline transforms under the hood so they're basically doing the same thing.

 

---- I am intending to test it this approach. Perhaps mixing CSS transforms with GSAP animations make things laggy sometimes, as you suggested... 

 

------- and the code you provided. I love it ! It is crystal clear and does the job more than perfectly. THANKS !


 

 

  • Like 1
Link to comment
Share on other sites

Hi guys, I have been testing animating with gsap only. It works but I do still get jumpy motion after refresh ( with cache clearing ) ... However, after scrolling down past an animation once , the animations start behaving nicely. It is almost like those animations get cached somehow. Have you experienced anything like it before, or perhaps you are aware of solutions to overcome such issues. 

Thanks for help A LOT, 

P.

 

Link to comment
Share on other sites

Interesting. Nope, never heard of this - do you have a link to a demo showing this issue?

Link to comment
Share on other sites

Before I post the webpage ( somehow ) I am working on I decided to try one more option. That is to propagate a timeline into each of the children of the container parents. Perhaps I am wrong but this approach produces smoother results ( so far I was using the animation (gsap.to) ) . It kind of works but I cannot figure out why the elements are triggered by another container parent. The expected outcome would be to make the children of the container A to be affected/triggered by the container A. Now they are triggered by both containers A and B ... 

I made this tiny demo - hope it demostrates the issue clearly ... I think I am making some silly mistake here that is causing the problem :(

Thank you very much for your support... !

See the Pen xxXjoxx by janek_marcepan (@janek_marcepan) on CodePen

Link to comment
Share on other sites

I noticed some things that looked odd to me...

  1. You're using .set() but then using a duration: 0.8 which doesn't make much sense. A .set() is a zero-duration thing.
  2. You're animating ALL of the ".elementyAnimacja" elements in that timeline, but if I understand your goal correctly, you want to only animate the ones inside each container ".doAnimacji" as it enters the screen, right? So the way you're structuring this logic won't work.
  3. Why are you trying to put all the animations into a single timeline like that and then animate between labels? Perhaps I'm missing something obvious but...

Unless I'm misunderstanding, perhaps this would be a better way to structure things: 

See the Pen QWqxLjp?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

First of all - thanks so much for your help. I applied your code in my project, and everything works nicely. 

Regarding your questions: 

1 You're using .set() but then using a duration: 0.8 which doesn't make much sense. A .set() is a zero-duration thing.

Yes, your are correct, I guess it was a leftover from a ".to" animation.

2 You're animating ALL of the ".elementyAnimacja" elements in that timeline, but if I understand your goal correctly, you want to only animate the ones inside each container ".doAnimacji" as it enters the screen, right?

Yes, you are right - my mistake !

 Why are you trying to put all the animations into a single timeline like that and then animate between labels? Perhaps I'm missing something obvious but...

I was just trying to test using timlines. 

 

Again - Thanks a lot !!!

 

  • Like 2
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.
×