PointC

Works fine in FireFox for me. What version and OS are you seeing this behavior?

Your stylesheet is targeting the class .container rather than the ID #container. The bounds are set to #container. Please try setting the bounds to .container and I think you'll be good to go. Happy tweening.

I'm not seeing anything odd, but I'm guessing you're referring to FOUC. (Flash of Unstyled Content). We've had some discussions about it. Here's a post that should be helpful. This may be helpful as well. https://gist.github.com/johnpolacek/3827270 Happy tweening.

The easiest way would be to set bounds to a container and the container would have a width of 100vw. But you can certainly use a variable as the minX/maxX value for the bounds. Keep in mind that you'll need to applyBounds for a resize event in a case like that. https://greensock.com/docs/Utilities/Draggable/applyBounds Happy tweening.

It looks like that rule isn't being applied to the container on larger screens. You're only setting that height on max 750px in the media query. If you change that, I think you'll be all set. Happy tweening. PS The media query block also isn't closed — just FYI.

Your #container bounds has no height. It's 0 pixels tall so the draggable element always snaps back to the top of it.

If you just need all the original sizes and positions before transforms, getBBox() should work fine. After transforms have been applied is a different story. Blake has a good write-up here: Happy tweening.

Maybe I'm not understanding this project, but why does each child need to a be a new SVG? Couldn't they just be groups of elements?

I've been forked. ?

Yeah, addEventListener isn't gonna work with a jQuery object like that. Here's a quick starter demo to loop through a node list and add a click listener without any jQuery involved. https://codepen.io/PointC/pen/bPVeNd Does that make sense? Happy tweening.

I can take a peek for you. Is there a new demo?

Well, if you need to do this with ScrollMagic, I think you'll have to set a duration of 1 in the scene parameters. Maybe something like this: https://codepen.io/PointC/pen/bPVpWJ I'd also recommend just tweening the properties you need rather than changing classes. Since this is a ScrollMagic question (not a GreenSock product), you can ask additional questions in their support area: https://github.com/janpaepke/ScrollMagic/issues Or they also have premium support here: https://support.scrollmagic.io/ We're happy to help with GSAP related questions or problems. Happy tweening.

I think this thread can help. Happy tweening.

Oh, I only suggested .off() because your example used jQuery. I personally skip jQuery on most projects. For a vanilla approach you could loop through and add the mouseenter/leave listeners and then just remove them while a particular dot is active. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

Hey @celli Have you looked at jQuery's off() method? http://api.jquery.com/off/

I'm not sure you really need ScrollMagic for this. Have you looked at position:sticky? https://developer.mozilla.org/en-US/docs/Web/CSS/position https://css-tricks.com/position-sticky-2/

I'm not entirely sure, but I think you're looking for info on the wheel event. https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event You can add a listener and play an animation. Subsequent wheel events while the animation is playing can simply return without doing anything. I made these basic examples for a different forum question, but maybe they'll help. https://codepen.io/PointC/pen/QPpamy https://codepen.io/PointC/pen/EJWpry Happy tweening.

Yeah, this is really a ScrollMagic question and we need to keep the focus on GSAP. Their support area is here: https://github.com/janpaepke/ScrollMagic/issues Premium support: https://support.scrollmagic.io/ That being said, here is a fork of my demo from the other thread you listed. I've just added a new scene to animate the body background color as you scroll through the panels. It should get you started. https://codepen.io/PointC/pen/EBjKEb Happy tweening.

Just delete the duration of 90% in your scene parameters and then the actual tween duration will be used. Happy tweening.

@OSUblake has a cool demo here that should point you in the right direction. https://codepen.io/osublake/pen/dYVNYd Happy tweening.

You can set the suppressEvents boolean to true. (It's false by default) https://greensock.com/docs/TimelineMax/progress() Happy tweening.

This is me thinking about 3.0.

I think this thread can help you: Just FYI — simple demos are best. We don't need all the actual assets. Just a few divs and enough code to demonstrate the problem. Thanks.

I see you changed your reply about the separate functions for each clipboard div. You don't need a function and resize listener for each div. The easiest way to make it work is give each clipboard a universal class. Something like this: <div class="sizeMe clipboard"></div> <div class="sizeMe clipboard02"></div> <div class="sizeMe clipboard03"></div> <div class="sizeMe clipboard04"></div> Then your dim() function targets them all like this: function dim() { var c = document.getElementById("cover"); var rec = c.getBoundingClientRect(); TweenMax.set(".sizeMe", { width: rec.width / 2.8, height: rec.height / 2.8 }); }

I don't understand the follow-up question. You want the red outline div to have the same width/height as the circle diameter? It appears that is working on resize so I'm confused about the desired result. What is it supposed to do and/or what is it not doing correctly? Just FYI — you can use the .set() method in your resize function to apply the new width/height to the div rather than using jQuery.