jeanettable

Hey friends! I am wondering if anyone has made use of css smooth-scroll behavior for nav links taking you smoothly down the page, and then experienced the glitchy-jumping feeling that the page undergoes when it crosses a section of animation on a scrollTrigger with scrub... Is there anyone who has encountered this, and come up with a good solution to skipping that section or disabling the animation for that scrollTrigger section in order to make it down the page to the section clicked in the nav? I really like the smooth scroll behavior with my nav links, but the glitching when it hits the scrollTrigger section is making me think twice. Are there any settings that I'm missing, or anything built into gsap to help with something like this? If this idea is unclear, I'm happy to provide a CodePen.

Yes! Nailed it! Okay, I see. I appreciate the insight on the use of the .duration, and solidifying the idea that nested scrollTriggers in fact does not make sense. Thank you!

In an attempt to make my pinned text slideshow feature more interesting with a zoom that is also on a scrub, I ended up with nested scrollTriggers. It appears to be working, but I am wondering if this is a good approach, and also about how I should go about specifying duration for the nested scrollTrigger? I ended up manually adding the other durations that follow it, in hopes that the zoom would take the full time of the text appearance tweens, and could not come up with another way to adjust for duration from the docs since it measures in seconds. The other piece that doesn't work as I expected is to do with the text getting zoomed with the image. Is this to do with how I'm trying to target text by id's for tweens, and the class with the background-image for the zoom? ** Further explanation: I have been playing with the markup (div ending originally on 19 for .intro, but tried separating it by closing it on ln 5...) because I was trying to separate the div that has the background img content specified in CSS, thinking that if I triggered only the .intro with the background I want to zoom, that the text specified by hierarchical id's would remain unbothered appearing in the main container. Any insight on why the text is also zooming would be helpful to my understanding of how to target these things separately to create a type of text slideshow feel with a zoom. Thank you for your mental energy, time, and the always helpful assists!

THANK YOU for linking the relevant doc that I hadn't yet seen! It is working beautifully now, and your explanation was fantastic. So helpful!

Hello Gracious Teachers and Friends! I'm struggling to discover clearly in the docs what is considered best practice to control animation tweens execution while placing the timeline containing those tweens on a scrub with scrollTrigger. In my attached minimal demo, I have been playing with duration properties (bringing them up quite high ? with minimal change), and also leveraging the position property to add space between tweens. It is also mentioned that scroll time = distance in this different forum post . Use of an empty tween at the end of the timeline is something else I tried so that the animation wouldn't get cut off before all three text sections animate their fades into and out of view....which appears to be working in my case to not cut off the last bit of animation. ** If I take that empty tween away, the animation I thought I had on 100% to end cuts off the animation right where it's at when the time (aka distance) runs out. ** I'm just wondering what is considered most effective, or "best practice." And I'd love a little guidance for the "aha" moment that will aid my understanding and guide me toward the best way to achieve a more readable speed of something like these text samples for a typical user scroll speed. Much appreciated.

Thanks a lot Cassie! I'll check it out!

So the SVGOMG tool was very useful for me, and I got the .svg files to a format that displayed. Thank you @GreenSock for pointing me in that direction! I had never heard of that.

I don't have codepen ability to add assets, like my .svg files, to make a minimal demo super useful here. I have provided one so that anyone can see how I'm trying to embed in the img tag. The animation is aiming to be very simple, like a slide in, etc. The problem is that the image itself does not show up. Instead I get the alt text that I provided. I have used svg's before with gsap, and had no issue with them rendering, so just wanted to know if anyone saw something wrong with my svg format. As this is not something specifically for this forum, I apologize. I may have more questions about animating it....once I can see it. Much appreciated, and I'll continue scouring stack overflow too.

I am new to working with .svg files, and am trying to use and animate some with gsap, but am instead seeing my alt text. It is my first time generating my own, and bringing them in. I have been embedding them in an img tag, and have checked out documentation and stack overflows, but remain stuck. Is there anything I'm just unaware of re: the format of the svg I'm trying to use....like in the DOCTYPE or headers in the image below that I have attached...? Any know-how would be much appreciated! Thank you!!

Good advice ^ put me in a place to notice that the version of gsap I was running was outdated. The repository from a tutorial I had started with was using an outdated version of gsap.min! I downloaded the latest minified gsap.min and scrollTrigger is happening! Thank you for your help!

It is still not working.

So I moved ScrollTrigger into the same lib folder where gsap.min.js is. When I command + click the script tag for ScrollTrigger.min.js, it is opening the file with all of the code in vs code. Is that what you mean by url? What I'm viewing is the file that I dragged and dropped from the .zip minified folder into my project. This is my first time trying to do this in this way, as opposed to cdn's. It is possible I missed something? I'm so grateful for your assistance guys! Thanks!

Thank you so much, Nico! That is wonderful news in the sandbox, and I really appreciate it! So knowing that, I have made those adjustments in my project. Scrolltrigger feature still not workin in my project with my use of bringing in script tags of my minified files, and gsap.registerPlugin(ScrollTrigger); it is still undefined in my console too. Is there anything wrong with the loading order of my script tags or any hunches anybody has about why scrollTrigger is specifically not loading correctly?

Hi! Thank you so much for your response and notes about the .map files! Here is the codepen demo . Even in the demo sandbox the scrollTrigger is not working as I expected it to, although it is loading! So I'm thinking that you are correct in it being a loading error. The animation.gsap.min.js plugin was for MagicScroll.io actually, for it to play nicely with gsap. But I was really hoping to use ScrollTriggger from gsap instead of MagicScroll once I watched a few videos and learned about how awesome it is. I find it much more intuitive, IF I can get it working in my project. The image below is how I'm loading just the scripts I intend to use, with no .map files. ** Notable: in my actual project when I run it, the tween animation plays in sequence, not controlled by scroll, but scrollTrigger is undefined, whereas in the sandbox the animation doesn't play, and scrolling is not controlling the timeline, but scrollTrigger is defined. Basically, I'm wanting to pin the intro section, and then run the fade-in/out of text on scroll, then allow scrolling it to move on beyond that section. I really appreciate any insight. Thank you for your time and assistance!

Hello there! I'm new to this community, and I have hit a roadblock when trying to use the scrollTrigger plugin in tandem with a timeline, and have been unsuccessful in discovering why the scrollTrigger is not working as expected. In my script.js file I have included the gsap.registerPlugin(ScrollTrigger); and the animation tweens are running, but not in the page section specified, or according to the scrollTrigger. The functionality that the scrollTrigger should be activating does not appear to be happening - when logging to console introTimeline.scrollTrigger it shows up undefined. But introTimeline exists with all that I would expect. I have included images of both files, showing the timeline construction and beginning of working tweens, and the order of my script tags in my index.html that are all provided locally from the zip file. From what I have been finding online, the order should be correct...and I'm not getting any 404 on these resources. Any leads or ideas about what I'm missing or how to troubleshoot further for scrollTrigger would be SO appreciated!