Leaderboard

Four! (For @Sahil)

Hi rgfx Your section's width is bigger than its child and content doesn't overflow, try to remove section's width in your CSS or set to smaller value

Is this what you're looking for?:

I came across a similar problem where requiring GSAP by webpack gave it a scope that broke some functionality: require("gsap"); require("gsap/Draggable"); Leading to the same problem mentioned by OP. If you include GSAP in script tags in the HTML you won't have the problem. I was able to continue using webpack by changing the way that it was imported: require("imports-loader?module=>undefined,define=>undefined!gsap"); require("gsap/Draggable"); I hope this helps someone It's such a great library but I worry that GSAP will be overtaken by others who are able to better serve the modern dev environment.

Hi Rick May pls check this out :

Hi Tasty, If you remove the ease on the stagger, you can clearly see why it's delayed: Using the 'visibility' property: Low duration stagger:

Welcome back, @Diaco

Hi and welcome to the GreenSock forums, Not really sure what you are asking. I'm not at all familiar with that file you shared, how it is supposed to be used, or what it does. Do you have a CodePen demo or something we can see working? These forums are focused on the GreenSock Animation Platform (GSAP) so if you have a question related to our tools, please let us know. We will be happy to help.

And that's why I would recommend writing code vertically. It's easier to read, comment out, and spot errors like how onUpdate does not belong in the ExpoScaleEase.

Welcome to the forums, @Cleo It's kinda tough to troubleshoot blind (a codepen would be super helpful) but it looks like your "items" only consists of one element with the ID of dd-heading. So perhaps your selector is wrong? Again, I don't know how you set up your HTML, so it's difficult to diagnose. Remember, though, you're not supposed to use the same ID for multiple elements (they must be unique). Did you mean to use a class instead maybe? Also, in your out(), you're simply playing the timeline which probably isn't the best idea because what happens if someone rolls their mouse over...and then very quickly rolls out (before 1.5 seconds has elapsed to reach the pause)? Nothing would happen. The animation would just keep playing. In order to get that out() animation to play, they'd be forced to wait the full 1.5 seconds before rolling out. That's just a logic issue with your code, not a GSAP thing. Maybe it'd be simpler to just build an animation in the over() and a different one in the out() so that they can dynamically determine their starting values based on whatever the properties are at that moment (even if a previous animation is part-way finished). If you still need some help, it'd be awesome if you could provide just the simplest codepen that demonstrates what you're attempting. Happy tweening!

Hi Noturnoo, What about moving the picture to a fixed layer, and then scaling it?

I've spent hours researching this and every indication is that it's a bug in iOS Safari that only applies to iframes. Here's proof: Notice that if you view that in an iframe on iOS, it doesn't work. It's supposed to scroll to 400px from the top after 1 second. There is no GSAP involvement whatsoever. It's pure JS. Thus far, I can't figure out any workarounds to force iOS Safari to work. I have submitted a bug report to Apple, so hopefully they'll get it resolved. Sorry for the bad news.

Try this instead, adding the keyword this to replayBtn (this is if this code is in a FRAME script wherein the replayBtn is accessible within that frame number) > this.replayBtn.on("click", function() { til.invalidate().restart(); }); or if you're using the default HTML it exports, you should end up with a reference called exportRoot, which you can use if you can't figure out scope (just replace this with exportRoot and it should work). How scope works in Animate CC --> var til = "blah"; // Frame-level Scope this.til = "blah"; // Movieclip-level Scope til = "blah"; // Global Scope