Carl

This was a little tricky due to how you were applying your css. when you pin elements they get wrapped in a pinSpacer div. this messes up your nth-of-type selectors. so once the second section got pinned, it no longer had height auto. now the 3rd section is the 2nd that gets selected with section:nth-of-type(2) { background: #8c75fe; height: auto; } I added inline styles to each section so you can now see what's happening. the second section has the class of .pinMe and is working as expected. https://codepen.io/snorkltv/pen/qBLOPdy?editors=1100

Thanks for the clear demo. the image is in content. I gave content a red background. content appears to be pinned correctly. I extended the end value so there is more time to scroll https://codepen.io/snorkltv/pen/vYvNJRa perhaps you meant to pin the purple section? or maybe I'm misunderstanding the issue.

@Rodrigo that looks like the original code. oddly enough it's off a bit on desktop safari but fine on iOS ?‍♂️

Upon further review it now seems that my demo above does not work as expected on iOS Safari. Please await the experts.

Thanks for the clear demo. It appears that using transformOrigin:"50% 50%" works fine in FireFox https://codepen.io/snorkltv/pen/oNJjXKg Being that things in the defs aren't actually rendered in the SVG I'm not so sure it's appropriate to apply svgOrigin to them. I suspect someone from team @GreenSock will be able to provide a more thorough investigation and answer when time allows.

As I understand your question you could use 2 ScrollTriggers. We refer to this technique as an “offscreen reset” I go over this a few times in my ScrollTrigger course, but here is a simplified demo https://codepen.io/snorkltv/pen/abQdKLN I use the grey area to show what happens off screen but you can change those values to match the top and bottom of the viewport here’s a more advanced example where the headers all roll towards you as they enter the viewport from top and bottom using the same basic technique. They all reset to the light grey side when they leave the screen too. https://codepen.io/snorkltv/pen/YzvjGom hope this helps

I really didn't plan on going down this path, but my curiosity got the best of me. Although, this is mostly functioning and you can pin the Swiper section AND navigate it with the scrollwheel and via swiping, I really don't think it's ready for use in the real world. My thoughts are listed in the demo. The short version is: Locking the scrollbar is asking for trouble. Best viewed in a new window: https://codepen.io/snorkltv/pen/QWzwmjJ

Glad that helped and thanks so much for the kind words. If you want to switch plans just send me an email and i'll provide some instructions.

Hi Kwabena, Glad to hear you are enrolled in my courses. Studying these demos is a great way to increase your learning! I'm guessing in this case that the developer just chose 3500 as a number that is "big enough" to work well in most cases. I just made a fork that uses a "function-based value" which figures out the scrollDistance based on the width of the window * number of sections. https://codepen.io/snorkltv/pen/LYMEdZb?editors=0011 This will allow the vertical scroll distance to be the same amount that things are moving horizontally. An added bonus of function-based values when used with ScrollTrigger is that they automatically get re-calculated on window resize. Be sure to open the demo in a new window and watch the console for updates after you resize. hope this helps Carl

that could be fairly complex. if you want to listen to scroll events but not actually scroll the page you probably want to look at Observer. This demo from the GreenSock team shows how to vertically scroll to a pinned a section and use the scrollwheel to trigger animations. when the animations are done then vertical scrolling resumes. https://codepen.io/GreenSock/pen/MWGVJYL?editors=0010 You might be able to plop in your swiper gallery to the pinned section and call swiper.slideNext() stuff where they use the gotoPanel() function on lines 81 and 89.

Yes, that is exactly the type of animation that GSAP excels at. My suggestion would be a timeline with 2 tweens that run at the same time. first tween: move along the x axis second tween: animate the skewX to 2 and have it repeat and yoyo. To account for the repeat the duration should be half the value of the first tween.

happy to help. Although I find the way you are doing it with MotionPathPlugin is the better way, I couldn't help but try to throw 2 circles in using my more verbose and less flexible timelines. https://codepen.io/snorkltv/pen/LYXwwzw?editors=0010

Good job on implementing the suggestions! Instead of trying to figure out a unique position for where second circle-after should start, I prefer to give it the SAME animation as circle-before but just start it at a later time. This can be achieved with a single tween and a stagger https://codepen.io/snorkltv/pen/BaGXgej?editors=0010 Things to note: I set a repeat:5000 inside the stagger object which makes each circle repeat as soon as it finishes one iteration. This is different than having a repeat on the tween or the parent timeline I also set the timeline to jump ahead using tl.play(2) so that both objects are animating immediately. I also initially hide main-container using opacity:0 in the css so that you don't see the circles before they are "attached" to the path. after the main functions runs I show everything using: gsap.set(".main-container", {opacity:1}) Hope this helps and good luck on the rest of the project.

ok, this turned into an afternoon of distraction After doing it first with MotionPath, I had a hunch it could be done with some math and experimentation so I came up with this https://codepen.io/snorkltv/pen/jOQgKWX?editors=0110 The circular motion is caused by offsetting the transformOrigin. It's pretty good. However you will always have to play with the duration of the animations of the arcs vs the straight part as it can look bad if there is an abrupt change in speed. Ultimately (as @mvaneijgen suggested) MotionPathPlugin is way cleaner as it: will only require one tween speed is automatically kept consistent throughout I think most people think of MotionPathPlugin as only good for SVG animations, however it excels at applying SVG path data to HTML objects! In order to figure out the path for an html element I created a similar svg rect with rounded corners converted that rect to a path with MotionPathPlugin used that path to animate a div circle around my div button https://codepen.io/snorkltv/pen/BaGXxrd This demo here copies the path value from the pen above and applies it to the div button. I did this to show that you don't really need an svg in your final html page https://codepen.io/snorkltv/pen/jOQgKNe?editors=1010 If you have buttons of different sizes you could use these files as guides to create a script to dynamically generate all the assets. If you are handy with SVG path data you could also use the dimensions and radius of your button to dynamically create your own paths. Somehow I feel there's some room for some future creativeCodingClub.com lessons here.

wow, @mvaneijgen came in hot ? with a super solution! I was working slower on something very similar so I'll just share it also https://codepen.io/snorkltv/pen/gOQyxMv?editors=0110 Also, there are times when you want to open one thing and close whatever other this currently open. I have video lesson on this in my GSAP video training, but here's the demo if you want to study the technique. https://codepen.io/snorkltv/pen/YzGpXWO

I'm 100% with @Rodrigo and @mvaneijgen in that it is MUCH better if you provide a demo even if it's broken. We have no idea if the box that moves left to right also moving vertically as the page scrolls. If not, what holds it in place? Is it pinned? Also we don't know what is triggering the animations (a big part of ScrollTrigger). There are just way too many factors for us to guess at which may or may not be involved with what you are seeing. However, I found this interesting in that I suspected that having multiple ScrollTriggers animate the same object may introduce some un-expected behavior so I put together a little test. https://codepen.io/snorkltv/pen/eYQQLrV the yellow section triggers the first movement of the red box. the blue section triggers the second movement. In my setup it proved useful to use a fromTo() on the second ScrollTrigger. The trouble you most likely encountered is that the second ScrollTrigger is using the existing starting x value of the box when the page loads. it doesn't know the first ScrollTrigger is going to move it. Hopefully this gets you closer to what you are going for.

Hi, Thanks for providing a demo. There are few conflicts and areas of confusion. I'm guessing you are at the stage where you just try a bunch of stuff and none of it quite worked as planned. That's ok, but it makes it kind of hard to figure out the intention. I tried making it work, but unfortunately I can't see any of the SVG artwork. on rare occasion a pink bar shows up and then disappears. Even after removing the JS It's just a white page. A few things I noticed Inside your loop you are creating a single gsap.to() for a single letter. In this tween you are adding a stagger property but there is nothing to stagger if you're only animating one thing. Your to() tween isn't tweening any properties so there is no animation to control with your toggle actions of "play pause none none". All of the ScrollTriggers use the same trigger ".one" so that means all the classes would get applied at the same time and not stagger. If you want to use toggleClass it would be better to just create a ScrollTrigger that is not attached to a to() tween Suggestions moving forward make a fork of the demo you provided. make sure all the SVG letters are fully visible. animate them with a simple gsap stagger. post the updated demo below with a clear description of where you are stuck or what needs to be added. Once we see the artwork and the animation we can then better advise how to implement ScrollTrigger and get the effect you want. Although it's ok to animate things by adding css classes, at this stage of the game I think it's only adding more confusion and potential for conflicts.

Thanks for the prompt and clear reply. Very helpful. That also takes care of one of the other oddities I experienced where onChange would only fire when I clicked. i'm not so sure an API change is necessary. I read the docs kind of hastily and was just throwing callbacks in until something worked.

Hi Team, I'm trying to see if it is practical to tap into some of Observer's features for that mouse follower effect i saw on your twitter feed ? It seems there may be some sort of distance tolerance or velocity threshold which determines how often elements are placed. I'm starting with the absolute basics of trying to only fire something after 50px of movement Below I am only updating the x/y of the circle if the mouse moves 50px. https://codepen.io/snorkltv/pen/PoxdybR?editors=0110 Move mouse slowly to see position updates only when mouse reaches the square border. Right now it meets my minimal requirement, however I only got this to work by having both an empty onMove callback and an onChange callback in place. if you comment out the onMove (line 7) it no longer works. The question is, why do I need the empty onMove? Thanks for your help! Carl

Great job, @mvaneijgen Very nice application of the "functions that return animations" concept!

Thought I would share a recent tutorial that I created for my Creative Coding Club students this week. The Demo https://codepen.io/snorkltv/pen/xxQpRYv??editors=0010 Watch the Full Lesson Video Details Today we are going to deconstruct a cool effect i saw on this Vega WebFlow Template. We'll dig behind the scenes to get a sense of how it's built and then build it up from a very basic starter file. Along the way you'll see that some of my initial presumptions about how to build it were incorrect. I decided to show you all my steps because I want you to see that in order to figure these things out, we all have to start somewhere and learn along the way. Be sure to watch the whole video and see if you can guess where I went wrong OR maybe you can try your own solution. Want more lessons like this? Great! I have over 200 lessons for you waiting in my GreenSock Course Bundle to help you learn: GSAP Basics (Free) Advanced Sequencing and Pro Tips ScrollTrigger SVG Animation and so much more The best news: my students get a new lesson every week like the one above so that there is always something new to learn! In just a few short years Creative Coding Club has become the world's largest source of premium GSAP training. I use the knowledge I've gained from reading and answering thousands of posts around here to help you avoid the pitfalls most animators face. You can learn everything I know about GSAP for less than $3 a month. There are super-affordable Lifetime memberships available too. Visit creativeCodingClub.com to start your journey towards mastering GSAP and discovering the joy of animating with code. See you in the club! Carl Not ready to join? Get a bunch of free GSAP tips when you Follow on Twitter and Subscribe on YouTube Bonus Demo Here is one of my favorites using a "double-mask" trick with SVG and one line of GSAP

I was so impressed by this technique I created a simplified demo to illustrate how just one letter's animation works. I thought for sure each character would have been duplicated multiple times. https://codepen.io/snorkltv/pen/dyQXqJr?editors=0010 Great job @PointC!

thanks for the demo. this was a fun little challenge. not sure of all the requirements and I imagine this can be tackled a few ways. hopefully this works as a starting point. https://codepen.io/snorkltv/pen/dyQMZjq?editors=0010 Note cards natively have position absolute in css and are stacked on top of each other at y:0 i use js to distribute them vertically (index * 200) the timeline animates them all back to y:0 (their normal position) all cards are 200px tall

I went ahead and made a much simpler demo for the off-screen reset. Imagine the grey bars were an area above and below the viewport, completely out of view. You will see that the header doesn't fade out until fully in the grey area https://codepen.io/snorkltv/pen/abQdKLN?editors=0010 I know this may not be the exact effect you are looking for but hopefully it helps illustrate the power of multiple ScrollTriggers for 1 trigger.

Sorry, but I'm not exactly following the effect you're after, but I'm confident anything is possible by using 2 ScrollTriggers per element/animation. Please see this demo. Notice that each 3d header "rolls 90 degress towards the dark grey side" when it enters the viewport from top AND bottom. Also note that each header is showing the dark grey side when it leaves the viewport but resets to the light grey side when it comes back in. this is referred to as an "off-screen reset". https://codepen.io/snorkltv/pen/YzvjGom?editors=0010 I have extensive step-by-step videos in my ScrollTrigger course, but hopefully this demo helps a bit.