Leaderboard

Hi @scrpt, there a few ways you could handle this. Here is a pen showing one way ... the comments should explain it. Let me know if you have any questions! Happy tweening.

@Friebel I read your post, but I don't know what you're doing. Check out this example repo. It will generate a visual comparison of the two bundles. https://github.com/OSUblake/gsap-treeshaking npm install npm run build Using "gsap" Parsed size: 118.73 KB Gzipped size: 38.19 KB Using "gsap/all" Parsed size: 55.46 KB Gzipped size: 16.63 KB It could be even smaller, but the unused eases aren't being dropped. Maybe in the next version. @Gordon Freeman you may want to have a look at that repo too. To install bonus plugins like the MorphSVGPlugin, look at the folder you download from your account. The latest version finally has a package.json file, but it's still not ideal. Copy the files in the bonus-files-for-npm-users folder to the esm folder, and then uncomment this in the all.js file. /* import DrawSVGPlugin from "./DrawSVGPlugin.js"; import MorphSVGPlugin from "./MorphSVGPlugin.js"; import Physics2DPlugin from "./Physics2DPlugin.js"; import PhysicsPropsPlugin from "./PhysicsPropsPlugin.js"; import ScrambleTextPlugin from "./ScrambleTextPlugin.js"; import ThrowPropsPlugin from "./ThrowPropsPlugin.js"; import GSDevTools from "./GSDevTools.js"; import SplitText from "./SplitText.js"; import CustomBounce from "./CustomBounce.js"; import CustomEase from "./CustomEase.js"; import CustomWiggle from "./CustomWiggle.js"; export { DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, PhysicsPropsPlugin, ScrambleTextPlugin, ThrowPropsPlugin, GSDevTools, SplitText, CustomBounce, CustomEase, CustomWiggle } */ Now install that esm folder in your project. DO NOT INSTALL GSAP FROM NPM!!! How to install from a folder or other location https://docs.npmjs.com/cli/install Or you can create a symlink, and keep reusing the same folder for other projects. https://docs.npmjs.com/cli/link Now import from there, and you should be good. import { TweenMax, TimelineMax, AttrPlugin, CSSPlugin, MorphSVGPlugin } from "gsap/all"; // Ensure modules don't get dropped by tree-shaking const activated = [ TweenMax, TimelineMax, AttrPlugin, CSSPlugin, MorphSVGPlugin ];

@Friebel what problems were you having? Can you make a simple repo of what you are doing? There really should be no reason to do that. Letting Babel handle the module transformation can cause problems. I would set Babel's es2015 modules to false and let webpack handle it. https://stackoverflow.com/a/41790154/2760155

Maybe this demo can help. It's an answer to another forum question, but it shows a simple master timeline. It also shows how to use the position parameter when you add the nested timelines to the master. Happy tweening.

Hi @Susenbeth Welcome to the GreenSock forum. I'm not sure I understand what you're asking. Do you want all the timelines to repeat or just one? I didn't see any repeats set in the vars for any of the timelines. You'd do that like this: var t1 = new TimelineMax({repeat:10}); // use -1 if you want it repeat forever I'm not sure what you need to happen as I see a lot of delays on the timelines. You could probably make one timeline or maybe create them in functions and return them to a master timeline. This article by @Carl should be helpful. https://css-tricks.com/writing-smarter-animation-code/ I also couldn't see any of your .pngs in your demo as you're linking to local files. If you need more help, additional details about what you want to happen would be great. Hopefully that info helps a bit. Happy tweening.

It's super simple to solve. Just doing a fromTo was easy enough and setting opacity = 1 is a good option also. I might at a later time change the other part of the application to use a style although for some reason I prefer attributes on SVG... but I don't have any actual reasons for my preference. Anyway, this forum rocks! You guys are super responsive and helpful. You make it very easy to recommend GSAP, paying for the license and engaging on this forum. Much thanks!!

Hi @SalvoDee If you check the link that @Carl posted in his answer, you'll find a few ways to animate on scroll. You could use ScrollMagic. http://scrollmagic.io/ If you don't want to use a 3rd party library, @OSUblake has some info here: We talked about the Intersection Observer in this thread: @Shaun Gorneau has a simple solution here: There are several ways to make it happen and those threads are just a few that we have on the scroll trigger topic. If you use the forum search feature, you'll find quite a few threads about different approaches. Hopefully that helps. Happy tweening.