Carl

thanks for the kind words @Rodrigo Here's the demo for easier access https://codepen.io/snorkltv/pen/KKvQOKY?editors=0010 I suspect it wouldn't be too hard to change it to read a color from data-attribute on the trigger (section) instead of pulling it from an array.

Please see the "Special Properties" section https://greensock.com/docs/v3/GSAP/Tween Timelines have similar callbacks too. https://greensock.com/docs/v3/GSAP/Timeline This video is part of my courses but it's also on YouTube.

Thanks for the demo. I don't use React at all so I can't help much with your actual project. However, I am working on a Swiper lesson for my GreenSock courses so I can share the following as a basic "work in progress" to show how to get the 2 to work together. https://codepen.io/snorkltv/pen/XWBNJjK?editors=1010 Despite not being able to help you with React I have a few thoughts on what you're doing: My strong personal opinion is: try to break free of the mindset of "adding css classes to things to trigger animations". Swiper offers events that you can use to trigger your GSAP animations. In my example everything is triggered via the "slideChange". Next, I'm a bit lost on how you plan to implement scrolling but right now your page doesn't scroll at all. I see what appears to be 3 tweens with ScrollTriggers assigned but I don't understand how the triggers are supposed to enter and leave the viewport to trigger the animations. If your carousel is going to be "locked in place" and your page doesn't scroll, I think you could use Observer to help you out. It shouldn't be too hard to wire it up to tell Swiper to go to the next or previous slides. Hopefully this helps you understand an alternate approach and you can better decide what will work best for your project.

that was my first guess too @Rodrigo however, it seems that on further inspection it is using a triangular clip-path that animates to a full rectangle. Here is a screen shot @iuras I had a similar demo from my GreenSock courses so I made a few tweaks to the polygon coordinates. Maybe this will help https://codepen.io/snorkltv/pen/BaPLVmL

to add empty space / time to the end of a timeline you can add a tween on an empty object with the duration of your choosing tl.to("#someThing", {x:300, duration:1}) .to({}, {duration:3}) // adds 3 seconds of time at end

thanks for posting that @akapowl I was looking through their API page https://flickity.metafizzy.co/api.html and thought it was really strange not to have any events relating to slide change. I totally missed that they were listed on their own page as you shared. ?‍♂️

Hi @Sam A So nice to hear you are enjoying the courses! Great job coming into the forums with a clear demo. Glad to see you got the best help in the world from @GreenSock Happy New Year!

thanks for the demo. nice job! If you want a ScrollTrigger animation to only run once you can set once:true https://codepen.io/snorkltv/pen/ExpybZV?editors=0010 From https://greensock.com/docs/v3/Plugins/ScrollTrigger Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".

It sounds like you want the behavior of the demo below https://codepen.io/GreenSock/pen/XWzRraJ If yes, then check out Observer Plugin Chances are you'll want to mix ScrollTrigger and Observer sections so this demo may also help https://codepen.io/GreenSock/pen/qBVgbXa/1ccf60146d680c09ba6074bf9132778d hopefully these help point you in the right direction.

Hi @Faz_kh Thanks for your interest in my courses. Unfortunately, this promotion was only for Club GreenSock members and it expired over a year ago. The good news is I currently have a public End of Year sale that offers tremendous value to everyone. You can unlock my entire course bundle for only $67 or just $2.95 a month. Below is a list of the over 200 lessons available. I'm confident there is no better value in any front-end training and I hope you find this favorable. Join Creative Coding Club Offer expires Jan 1 Carl GSAP 3 Express Welcome to the course Our Development Environment GSAP 3 Express Notes and Instructions GSAP Object: Tweens and Timelines Basic Tween from() and fromTo() Special Properties: Delay and Repeat Special Property: Ease Reading Ease Curves Special Property: Stagger Tween Control Why from() Tweens Glitch and Stop Working! Using the GSAP Documentation Why Timelines are Important Basic Timeline Intro Position Parameter Visualizer Basic Timeline Position Timeline Control and Labels Simple Rollover / Hover Effects Rollover / Hover Effects for Multiple Elements Constant Hover Pulse with Smooth Reset Project Setup Basic Animation Timeline Defaults GSDevTools Tweak Timing Remove Flash of Un-styled Content (FOUC) Typewriter Effect with TextPlugin Getting Started with SplitText SplitText Word by Word SplitText Line by Line Get Started with ScrollTrigger in 3 Easy Steps Percentage-Based Keyframes Percentage-Based Keyframes Part 2: Benefits, Downsides and Challenges Beyond the Basics Chapter Intro From Illustrator to Animation Getter-Setter Methods Smart Play-Pause-Restart Toggle Button Scrub Through an Animation with an HTML Input Slider Tween progress() of an Animation OOPS: Gotta Fix the Buttons Intro Callbacks Build a Timeline Visualizer with getChildren() killTweensOf() gsap.utils.wrap() gsap.registerEffect() CSSPlugin: Use clearProps to remove inline styles 3D Transforms Understanding GSAP's immediateRender Property Tweening function-based values Ease-based distribution of start times Using the weightedRandom() helper function Using the distribute() utility function Rubberbander Text Effect Staggered Staggers. What? 3D Text Rotator Repeat Values on Tween vs Stagger Object Using Callbacks in Staggers Staggered Staggers with No Gap Intro Linear Navigation with addPause() Non-Linear Navigation Using Labels Add a Pause to a Timeline for a Specific Amount of Time Nested Timelines Functions That Return Timelines tweenTo() and tweenFromTo() File Setup Animate Panel 1 Create a function to animate 3 panels Morph curve using AttrPlugin TItle Effects Generator Part 1 Title Effects Generator Part 2 Title Effects Generator Part 3: Wrap Up Refactoring Multiple Timelines Into a Single Tween Staggered Animations Variations on a Theme ScrollTrigger Express Welcome Get Started in 3 Easy Steps Scrub and Pin Pinning and pinSpacing Overview Pinning Deep Dive Pin Spacing Pinning Car Project Intro to Parallax Scrolling Aerial SVG Car Parallax ScrollTriggers for Multiple Sections Smooth Scrolling with Locomotive Scroll Prevent Scroll on Fullscreen Intro Back to Top Link: fastScrollEnd and toggleClass Change Nav Color on Scroll Change Nav Color on Scroll: Part 2 Responsive Scroll-Based Reading Progress Bar ScrollTo Plugin and ScrollTrigger (Animated Jump Links) ScrollTrigger Toggle Animations 4 Ways Responsive Scroll-Driven Line-by-Line Text Effect Part 1 Responsive Scroll-Driven Line-by-Line Text Part 2 Off-Screen Reset 3D Rolling Headers Slide-in Panels Layered Pinning Layered Pinning from Bottom SVG Mega Scroll and Follow Use ScrollTrigger Callbacks to Control HTML5 Video Scoll-Driven SVG Path Follower Part 1: File setup, Alternating Rows and ScrollTrigger Basics Part 2: Offscreen Reset Part 3: Mobile Layout SVG Animation with GreenSock Welcome! Course Status Updated 11/19 Animating the Guts of an SVG with GreenSock Style SVG with Attributes and CSS Exploring More Shapes and Line Styles with Boxy SVG SVG Path Element: Bezier Curve Commands SVG Groups and Applying Transforms SVG Text: Using Custom Fonts Understanding transformOrigin and svgOrigin Project: SVG Basic Banner SVG Strokes: linejoin, linecap, and miter-limit Avoiding Weird Glitches with Line Animations Don't Animate tspan Elements Character by Character Animations Part 1: Characters as Paths Character by Character Animation Part 2: Characters as Text SVG Text on Path SVG viewBox and viewport Understanding preserveAspectRatio: Putting Skinny Rectangles in Squares preserveAspectRatio Part 2: Recap and Examples Marching Ants: Intro to dasharray and dashoffset Drawing Animated Lines Using DrawSVG Plugin DrawSVG Mastery Adding Custom Split Points with Boxy SVG Recreating GreenSock.com Jelly Nav Introducing SVG Clip Paths Animating SVG Clip Paths Introducing SVG Masks Animating SVG Masks: Reveal and Hide Text SVG Masks: Spotlight Effect Clip and Mask: Feathered Colorize Effect Welcome to Programming SVG Building the Worst SVG Drawing App SVG Background Generator (blend modes, gradients, random start time) B-sides, Bonuses, and Oddities Laziest Response Slider Using repeatRefresh Responsive Full Screen Circle using CSS VMAX and Edge to Edge Text Curved motion using different eases for x and y Reveal dots while animation plays Constant Speed with Random Motion Directional Rotation Bug Race in a Single Tween Bug Race Complete: Jerk Level and Weighted Random Values Hacking Ease Curves Basic Animated Counter using Snap Plugin Customizable and Re-usable Counter Effect Auto-close open item // reverse current timeline Animated Snow using Interpolate Favorite Mask Effects Using Clip-Path in a Custom Effect for Multi-directional Wipes Hard Edge Gradient Animated Fill Mask-Up / Scale-Down Effect: Chevy Tahoe Ad Exploration Mask-Up / Scale Down Part 2: optimizations and registerEffect() Text Mask Effect Using Blend Modes 3D Card Flip Effect (double-sided) Interactive 3D Card Flip 3D Card Flip Basic Game Responsive Hover Nav Gallery with Burn-in Effect Image Comparison Tool with Draggable Gradient Filled Text on Scroll Intro to ScrambleText Plugin Staggered Text Effect with ScrambleText Creating distinct enter and leave animations with a single timeline Circular Distribution of Elements without much Math Ferris Wheel: Counter-rotation to keep spinning elements upright Interactive Peacock with Modern GreenSock Banner: Clean loops and custom end screens : Part 1 Callbacks Banner: Clean loops and custom end screens : Part 2 TweenTo() Multiline Text Mask Effect (overflow hidden) Part 1: Basic setup Multiline Text Mask Effect Part2: Responsive Using CSS Clamp for Responsive Text Sizing Zero-Duration Tweens and set() Zero-Duration Tweens Part 2: addPause() Gallery with AutoPlay Part 1: File Setup / Basic Functionality Gallery with Autoplay Part 2: Toggle Switch Breaking Free of the Timeline Mindset: Part 1 Breaking Free of the Timeline Mindset Part 2 Breaking Free of the Timeline Mindset Part 3 Creeping and Jumping Dots Physics Plugins Part 1: PhysicsProps Physics Plugins Part 2: Physics2D Rotating Input Dials (SVG) Challenge: Slime Conveyor Belt Solution: Slime Conveyor Belt Constant Loop with Return to Start Drop Down Descramble Part 1: Technical Exploration Drop Down Descramble Part 2: Building the Animation Animating background-size cover and contain Constant Loop with Return to Start: Part 2: Smart Reverse Staggered Bars Wipe Transition Ease-based distribution of start times GSAP 3 Express Free Trial Ad Zim Splat 3D Inverted Cube Spinner getRelativePosition() Spinner Demo One Line of Code Mega Demo Apply a CustomEase to a MotionPath Tween How I Built my CustomEase Visualizer Pixi Circulator Beta Pixi Sweet Corn Pixi Circles Top and Bottom Dynamic Text Effect Self Playing Dynamic Interactive Text Effect Special Eases SlowMo Overview In Your Face Effect Whirl-Around Text Effect RoughEase Overview Scary Flicker Shiver Configure an elastic ease Steps Ease for Spritesheet Animations CustomEase Quick Start Unlock all these lessons for only $67 (expires Jan 1)

Hi @iamjonas and welcome to the GreenSock forums, I wasn't able to follow your code closely enough to really ascertain if there was a problem with autoRemove children, however as a general principle I avoid timeline manipulation like this when dealing with user interactivity. It is usually much more bullet-proof to generate your animations fresh on the fly then move existing timelines into other timelines while trying to restart the animations that you just added. As @mvaneijgen noted these things can be troublesome until you find the "right way" and along that journey we all try things that seem like they should work but are more complicated than necessary so don't sweat it I haven't used jQuery in awhile but I think you can get closer to accomplishing your goal with this type of approach https://codepen.io/snorkltv/pen/ExpjWGj?editors=1011 The app starts out by defining a currentContent variable that will eventually point to the current content on the screen. Until anyone clicks anything, currentContent is undefined. The basic premise is that every time you click a button you get its index and then see if the item in the contents jQuery Object at that index is the same as the "currentContent" (content that is displayed) if they are the same then nothing needs to be done. if they are not the same then pass the object that is in the contents jQuery object at that index into the animateIn() function. The animateIn() function then animates in the thing it should and if there was a previous currentContent it animates that thing out. The thing you just animated in becomes the new currentObject. rinse and repeat.

@Rodrigo thanks so much for the kind recommendation regarding my courses. @NickNo it looks like you have a good understanding of animating the SVG viewBox. Thanks for providing such a nice demo to work with. I don't have a lot of time to rework this or go over every aspect but hopefully the following will help a bit. When it comes to interactivity like this it can often become troublesome to manage the states of multiple pre-created tweens especially since each of your 4 tweens are animating the same thing (viewBox of the svg). There are a few variations of how to approach this but the end result should be something that creates the animations that you need when you need them. In your case you should create animations when the user clicks on things. Since you provided all of the viewBox settings I went ahead and added them to each group as a data-box attribute <g id="A" data-box="40 40 400 400"> <circle fill="#FF0096" cx="131" cy="130" r="78"/> <g> <path d="M125.3,145.7c-2.3,2.9-7.9,2.9-16.6,0c-1.9-0.9-2.7-2.6-2.6-5.2c1-15.9,7.4-29.7,19.1-41.4c3.3-2.8,7-2.1,10.9,2.3 c10.6,14.3,15.6,28.1,15.1,41.3c-0.7,4.5-5.9,5.7-15.6,3.8c-2.8-0.7-4.4-4.3-4.7-11c0,0-0.9,0-2.6,0 In the js I create an array of all your groups called btns and loop through it and give each button a clicked property of false a click eventListener that checks if the clicked property is false if false then tween to the viewBox to this btns data-box value and set clicked to true if true then tween back to the default viewBox view and set clicked to false const btns = [A, B, C, D] btns.forEach((btn, index) => { btn.clicked = false; btn.addEventListener("click", ()=> { console.log(btn.dataset.box) if(!btn.clicked){ gsap.to(Wall, {attr:{viewBox:btn.dataset.box}}) btn.clicked = true } else { btn.clicked = false gsap.to(Wall, {attr:{viewBox:"0 0 800 582"}}) } }) }) https://codepen.io/snorkltv/pen/WNKvRaj?editors=0010 That gets a bit more complicated as you will have to tie multiple animations together and you have to deal with situations where the user may click fast like: click on A and then B but while A is zooming out they then click on C.

nicely done.

Ah, good catch @thousandlines The issue was that the text was displayed for 0 seconds and then instantly the timeline would repeat. The solution is to add a repeatDelay to the timeline so that the last item has time to be seen. Updated Demo https://codepen.io/snorkltv/pen/QWBWeEV?editors=1010

hmm, I don't what you mean by "it doesn't register the classes". As GSAP helper noted it would be a big help if you create a minimal demo. This way we can see the html, css, JavaScript and any errors. I'm only guessing that maybe you need something like this: https://codepen.io/snorkltv/pen/abjbaJd The function-based values allow each target to be assigned unique x and y values. You could also write a loop. If you need more help, please supply a demo. If you want to get more comfortable with GSAP, you may benefit from my free GreenSock beginner's course.

Thanks for the recommendation about tailwind. I've been mildly curious about it.

Hi Sean, Glad to hear my courses have helped and that @Cassie was able to clean it up and do all the hard stuff. Might not be understanding perfectly but perhaps this gets you a little closer https://codepen.io/snorkltv/pen/ExpxRwb?editors=1010 I basically gave each card its own timeline and then added that to the main timeline at incremented position values. However, with your layout it will be difficult to maintain equal spacing throughout the animation as your layout has each box starting in a row which means some boxes are starting farther away than others and thus would need longer durations. Right now each card's animation is the same duration which means some boxes move faster (cover more distance over the same time). I would suggest starting each box in the same position, but I didn't know how to edit your layout and css. In face this kind of reminded me of my slime conveyor belt lesson which is basically taking the same approach https://codepen.io/snorkltv/pen/abyBbXZ Also I noticed that you are using ids like #card multiple times which probably isn't good. I would suggest using classes. Anyway, hopefully this helps get you closer.

Hi, Any chance you can simplify this to plainly show that an onReverseComplete isn't working properly? Unfortunately I'm having trouble assessing what all those tweens are doing and it isn't clear what things like .circle-line-2 or .line-2-a are without hunting through a whole bunch of svg code. My suggestions would be get rid of the loop. show just 1 timeline with 1 ScrollTrigger remove the svgs entirely use 2 or 3 divs with clear names / classes (.red, .blue, .green, etc) so it's very clear what should be animating in each tween for the animations just use a very simple x, rotation, or opacity change make sure the trigger element is fully visible. add callbacks to onComplete and onReverseComplete I'm confident that a clean demo will help us get you a quicker and more accurate solution that you can apply to your project.

ha, that's a pretty funny oddity. I haven't seen that before. I switched to using a set() (no animation) an I used the position parameter instead of duration. feel free to change the duration variable var duration = 1; gsap.delayedCall(1, () => { let textTimeline = gsap.timeline({ repeat: -1 }); array.forEach((obj, i) => { textTimeline.set(".switch-text", { innerHTML: array[i] }, i * duration); }); }); https://codepen.io/snorkltv/pen/BaVENgv?editors=0010

I have a blog post here https://www.snorkl.tv/greensock-staggers-with-seamless-loops/ with full video tutorial and multiple demos. Notice in the demo below that item 4 animates out while item 1 animates back in https://codepen.io/snorkltv/pen/ExVEOPa

Hi and welcome to the GreenSock forums, Thanks for the clear demo. It seems you found an alternate solution but this could work too https://codepen.io/snorkltv/pen/GRGeJYX?editors=1010 This allows the text-1 to fade in from the start. Note I set the opacity of all h1 tags to opacity:0 in the css. This removes the flash of un-styled content and makes the looping cleaner as I implemented it using the label. You could also approach this using a special stagger technique but I don't want to throw too much at you if you're just starting and you're comfortable with your solution.

Very nice!

Hi @ti-sign Very nice of you to stop in and offer up this example. It's always interesting to see how folks approach challenges like this. I really can't say there is anything wrong with what you did and certainly no "immediate stupidity" ? I came up with this approach in my lessons https://codepen.io/snorkltv/pen/wvqjmQq?editors=0010 The short explanation is that I store the section and nav colors in separate arrays. If you open the demo in a new window and resize you'll see the height of the nav can change size and yet the nav color always changes exactly when a new section hits the bottom of the nav. Perhaps you or someone else will have fun experimenting with this technique as well. As far as dynamically reading HSL colors to decide the appropriate nav color, that's not something that would come quickly to me, but it doesn't mean it isn't worth exploring further. Thanks again!

I didn't study the exact motion for all that long, but this might be a good start https://codepen.io/snorkltv/pen/ZERxLRJ?editors=0010 keep in mind elements inside an SVG can't have 3D transforms applied.

thanks for the simple demo. my jQuery is a bit rusty, but I recall that hover would handle 2 functions for mouseenter and mouseleave. The biggest issue is that you are creating a new timeline on every hover. I don't really know what the end result is but usually it is best to create the timeline once for each element and then control it differently for each mouseevent. hopefully the following can get you going in the right direction. https://codepen.io/snorkltv/pen/VwdQYRb?editors=0110 "play none none none" looks like toggle actions for ScrollTrigger and wouldn't apply at all here.