gauel

So actually the error was with the gsap import: I changed this: import { gsap } from 'gsap/dist/gsap.js'; to this: import { gsap } from 'gsap'; And now it works!

Hello, I import timelines from an external animations.js file to one of my Svelte components but I don't know where should I pause the imported timelines so that I can control them from from the master. Importing the timelines: import { islandsRevealTL, islandsZoomTL } from '../lib/js/animations'; Creating master timeline: masterTL = gsap.timeline(); masterTL.add(islandsRevealTL(), "islands-reveal"); masterTL.add(islandsZoomTL(), "islands-zoom"); Playing the animations on click event: <button on:click={() => {masterTL.play("islands-reveal")}}>Reveal</button> <button on:click={() => {masterTL.play("islands-zoom")}}>Zoom</button> Now the timelines just play all at once from the master timeline. masterTL.pause() Pausing the masterTL doesnt work. Pausing the imported timelines when adding like this: masterTL.add(islandsRevealTL().pause(), "islands-reveal"); works, but I can't play them with buttons. How can I pause all the added timelines and control them with a .play() method with the buttons? Thank you for any help.

Oh wow, hello and thank you @Rodrigo for your help! Sounds like a great approach to split the work into animations first and then connecting that all together ? Also thank you for the starters, didnt know about them. I actually already have the website started with the basic structure, components for sections but this really helps a lot. So If I understand correctly, I would create a timeline for each section with all the animations in that timeline and after that create a global timeline from the top to the bottom of the page, add those sub-timelines in there and fire them on specific moments? I didn't even know i could nest timelines like that ? GSAP is so powerful

Hello, I'm working on a relatively complex project website that will have several sections of interest. Since I'm still kinda new to the GSAP library, I wanted to have opinion of others about the approach. Website will basically consist of the first part being a three.js fullscreen animation that will be controlled with scroll and the rest of the page will be DOM elements with just transforms and tweens. I would like to make the first three.js part to snap to certain moments but after that to disable this behaviour and go with normal scrolling. I was thinking about creating a timeline for each section to deal with all the transforms there and maybe creating a global scroll timeline with labels to be able to scroll to a specific moment? Or would it be better to have just one timeline and all the scrolltriggers there? Or should i just use the ScrollTo plugin without the use of the timeline? Or can I jump to a label when I have several timelines? These are the things where I'm not so sure what would be the usual approach in such a complex solution. Specifically with the snapping and several timelines on the page. Attached is rough idea of the viewport movement which explains the structure and the snap points on the website. Sadly my project is build with svelte, tailwind etc. so I cant provide codepen easly. Thank you for any help.