[Toggleclass on elements entering viewport with Scrolltrigger]

That was my first approach, the trouble I had with that was toggling a class with the timeline. 

[Toggleclass on elements entering viewport with Scrolltrigger]

Thank you for replying @ZachSaucier,

 

How would I make it so that the next scrolltrigger won't start without the previous one ending, do I have to individually define the triggers? If I change the end time it will make the scrolltrigger longer but the one after will have already started without the prior ending. 

[Toggleclass on elements entering viewport with Scrolltrigger]

On 8/28/2020 at 6:24 PM, ZachSaucier said:

ScrollTrigger has a toggleClass functionality that adds a class when entering/exit. So you could change your CSS to have an enable class (instead of a disable one) and then use toggleClass:

const buttons = gsap.utils.toArray('.btn');
buttons.forEach((btn) => {
  gsap.from(btn, {
    scrollTrigger: {
      start: 'top bottom',
      end: 'bottom top',
      trigger: btn,
      toggleClass: 'enable'
    }
  });
});

But if you need to keep disable then what you have is good (other than your syntax errors - it should be onEnter: () => { } for example).

Hey Zach, 

 

Is there anyway for me to increase the time/distance between the scrolltriggers? The buttons are scrolling one after another and I would like there to be some time gap after each button. 

 

I made a small demo: 

See the Pen ExgvBzW by mallabiplav (@mallabiplav) on CodePen

[Scrolltrigger and margins?]

@ZachSaucier This is a much better and simpler way of what I was trying to achieve. Thank you! 

 

Cheers! 

[Scrolltrigger and margins?]

Hello @ZachSaucier @GreenSock @akapowl,

 

Thank you all for replying so quickly. I am sorry that the demo was confusing and did not convey what I wanted it to do. I have put a part of my code, it is a bit dense but I hope that is okay. 

 

I did as @GreenSock said, the top padding works, but the bottom does not? Am I missing something? 

 

See the Pen rNMOYZy by mallabiplav (@mallabiplav) on CodePen

[Scrolltrigger and margins?]

Hello everyone, 

 

Lets say I have a full page, and I have a panel inside it with margins of 2em each. I have two panels inside that use scroll triggers. I would like the panel to maintain all margins, how do I go about creating that? In the first picture below, the red is the margin I want to maintain with the left and right panels being able to be pinned. 

 

The second picture is what I am facing, the margins on top and bottom are not maintained when left and right panels are pinned. 

 

 

 

See the Pen ZEpGZpv?editors=0110 by mallabiplav (@mallabiplav) on CodePen

[Unable to get column to pin after reveal.]

@akapowl That was exactly what I wanted. I was trying to emulate my scroll trigger from a previous post and that had the translateY in the css itself. Did not realize that was the problem! Thank you for your help! That was perfect.

[Unable to get column to pin after reveal.]

On 11/26/2020 at 5:36 AM, GreenSock said:

I'm not sure I understand the desired effect. Based on your code, it seems to be doing what you're asking, but I'm sure I'm misunderstanding something. A few quick notes: 

1. You're making one of the most common mistakes by not setting all your transforms via GSAP.  I'd add gsap.set(".section3", {yPercent: -100, y: 0});
2. You're using mis-matched versions of GSAP and ScrollTrigger. I'd definitely recommend using the latest of each. 

So are you saying that you only want the left box to stay pinned while scrolling? And it should stop being pinned when its bottom reaches the bottom of the box on the right (the taller one)?  And how do you expect the transition to be timed with that? Is panel3 getting revealed WHILE the left box is pinned but the right one is scrolling past the whole time? 

 

@GreenSock I read the post and even then completely missed the note. This was my bad. That seemed to have been the problem that was messing with the scroll trigger. 

[Unable to get column to pin after reveal.]

Hey everyone,

 

I'm trying to accomplish a simple pinning, it worked initially but after I tried to add a reveal panel the pinning shows weird behavior (will not pin).

After section 3 reveals itself from underneath section 2, I would like the left box to pin itself. This is a basic snippet that I created from my actual project. The pinning and everything else worked fine without the reveal. 

 

Thank you.

See the Pen VwKZBvN by mallabiplav (@mallabiplav) on CodePen

[Circle chart load with scrolltrigger.]

These are awesome. Thank you so much @mikel.

 

You all reply so quickly. Thank you! 

[Circle chart load with scrolltrigger.]

Hello everyone, 

 

I have been wondering how I would pull a circle chart off maybe either animating on scroll or reacting to scrub. 

I envisioned something like the codepen I linked, it is a plugin though, I hope that will not be a problem. 

 

Thank you. 

See the Pen eQmmbO by junedchhipa (@junedchhipa) on CodePen

[Div width changing when using flex.]

@ZachSaucier Thank you for welcoming me and replying so quickly! That is what I needed, spent the whole day trying to figure it out. Your help is much appreciated. 

 

Thank you for the side notes too, I made a demo as fast as I could and used names that came into my head first. 

[Div width changing when using flex.]

Hello everyone, 

 

I am new to GSAP and have been playing around with it, I have been trying to make a slideshow kind of thing on scroll where I pin a sidebar and the other side has a changing paragraph/heading. I am using flex with two divs inside and pinning the left one. When my scroll trigger hits and pins the left div, the size of the right one changes. 

 

Help would be appreciated. 

See the Pen jOrREoL by mallabiplav (@mallabiplav) on CodePen