noob_jimi

@GSAP Helper Thanks for the explanation sir. It helped a lot. Using a chromDevTool, i found that when I hover any box which shows the overly of text for the box, and then if i scroll the wheel, it shows a red/drop frame in meter. I removed any extra animation or code for the hover animation but it still shows the lagging. Couldn't find a fix for that yet. I understand its may not be a GSAP issue. Just wanted to give you an update on this thread. Thanks again.

@GSAP Helper also let me know if you like to check it when lenis is disabled. I've tested it before posting here to make sure that its not lenis issue. but still i can disable if you guys would like to test it.

Hi @GSAP Helper Here you can check the live site example of my development: https://volume.jamesnash.net/projects/ As it was hard to create the exact replica in codepen, i had created a shorter version on codepen. As you can see on above link, I've no transitions applied to 'fade-in-up-tween' class and when you scroll down, the page start to feel jerky/jumpy. (Sorry i dont know the right word to explain its jerky/jumpy, but i mean its not smooth )

Hello to all heros here, I'm creating a site with gsap + tailwind + lenis smooth scroll. I used aspect ratio to create boxs. and grid css property. and I applied gsap to all the items with class "fade-in-up-tween" to have fade-in effect as user scroll down. It works all good in firefox. But In chrome and safari, after scrolling few boxes, it jumps, or more it feels like page is stuck for half a second or second before it continue scrolling. Here is a codepen demo using all the same properties I'm using on my website. https://codepen.io/jimish-soni-the-flexboxer/pen/poqGzGv if you can't see the issue with above link, here is link to my development site: https://volume.jamesnash.net/projects/ Can you guys please highlight if i'm doing anything wrong or if avoiding any standard practice. Thanks to all heros!

Hi guys, I'm trying to replay the timeline from the beginning with scroll trigger when I use scrollTo to that section-id. In the attached codepen demo, If i scroll down to the 2nd or 3rd section, and then when i click on navigation link(right top corner links) to get to section 1, it reset the timeline to start from beginning. but now its not connected to scroll trigger. it auto-plays now. how we reset the timeline and still keep it attached to scroll trigger as it was before. Any help will be really appreciated.

Hi @OSUblake Just to understand things more clearly, i have two question: 1. Why not use scrolltrigger .enable() and .disable() method instead of kill(). 2. What these three parameters in .getChildren(true, true, false) I couldn't find it in doc.

you are the best @OSUblake

Hi @OSUblake yes kill is not an option here, clear props will help. but this is just an example of two tweens, in real world i could have a list of 10 or 15 timelines with different tweens in it. Is there a function using which i can get all the timelines on the given page and then apply clear props to it. and when user set animation to on, set the props again. I tried with the globalTimelines.getChildrens(), but i could not figure out what to do with the response from that function. in foreach loop on that when i set tl.clear(), it says clear is not a function.

Hi @Cassie, sorry for the poor demo, i update the demo to yours. thank you. so lets try with the demo you created. I just changed your tweens to FROM instead of TO. and now the demo isn't working. When i set the animation to off: 1. The second box will not appear because it set to tween from opacity 0 to opacity 1, so its inline css is still set to opacity:0 by gsap. 2. First box is set to tween from 100px below from its actual position, it doesnt go to normal position when animation is off. Thank you so much for your response. Codepen demo : https://codepen.io/jimishsoni1990/full/jOBVEqR

I'm trying to create a toggle switch "Animation on / off", by default on page load, it is set to animation on. Now when I set animation to off, it should remove all scroll trigger and tweens and its css. and when i turn it on again it should re-enable all animations. Taking inspiration from following page, i used the code to make this work. but i'm not able to get the concept still. It disables the scrollTrigger, but it doesnt reset the position of elements to their normal value. When you set the animation off, you can notice that second box is not visible, because it was set to tween from opacity 0 to 1. so i think we need to use clearprops, but i cant find a way to get all the timelines and do it at once, and then re-enable them animation checkbox is set to on. Can anyone please suggest the correct to make the animation on/off toggle working. Thanks in advance.

@OSUblake Thank you so much for this amazing solution. But I'm still confuse with two things: - Here is my jsFiddle: https://jsfiddle.net/jimishsoni1990/jc44re7x/6/ 1. I updated your #path with my SVG path. Why arror doesn't follow the line. looks like it gets proposal to the line. I want to keep the head of an arrow towards the next green drop in a line. so that it gives like effect of arrow scrolling on the that green dotted line. 2. When I refresh the page arrows is at right position, but when i scroll it down and go back up, it changed it position and gives a weird effect. Again thank you for support. Let me know if you need any other detail from my end.

@mikel Hi Mikel, I was trying with those solution, but my circle is not moving with my svg path. can you please let me know what i'm doing wrong. My SVG path is different than the example. is it because of that? https://jsfiddle.net/jimishsoni1990/jc44re7x/

@mikel Thank you. I just found these two examples an hour ago. Thank you again for your help.

Hi there, This is my time with GSAP and I'm very exiting to learn this. I Want to create and slider navigation on some what curved line as shown in attached image. User can move the arrow downwords, (moving along the path), and based on how much it is moved i need to change the content of the slide. Can you please help me to achieve this. What i Thought was having a those green dots as svg path and arrow as image, and then use draggable plugin to move it along the path. But I'm not able to convert this logic into code. Let me know if that login is correct and how can i code it using gsap.