AkhilRaja
.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
AkhilRaja's Achievements
-
thank you @OSUblake im looking for this explanation.
-
its not working for what im trying to achieve, look at my code and see scroll trigger working after 10 sec and in your code after 10 sec scroll trigger dont work. I can use Wrapper hack to make it work, i created this tread so i can learn something new like maybe there is a way in GSAP that i can target the same element and timeline and scrolltrigger can work together and update each other about property changes.
-
https://codepen.io/AkhilRaja/pen/mdpwMLM here i remove the background color so you can see my hack is working on the right side ".SpinWrap h1" element when we scroll.
-
Its not working the way i want, i wanted to achieve this, that when Timeline is playing and then i use Scrolltrigger, both are targeting the same element ".H1" rotate: property and changing its value. If you look at my Codepen i achieved this by creating ".SpinWrap h1" timeline is targeting ".SpinWrap" and scrolltrigger ".SpinWrap h1". I want the same effect you see on the right side ".SpinWrap h1" when you scroll its spin while timeline is playing. I created ".SpinWrap h1" just to show you what result i want to achieve by only targeting ".H1". I hope you now understand what im trying to explain.
-
I want to scroll trigger animation on the same element which has a gsap timeline animation running. In my code pen i have two elements ".H1" and ".SpinWrap h1". I want to spin ".H1" while gsap timeline is running, i want to do it in a way that gsap timelines and scroll trigger remember my scroll change value and get updated and keep playing when im not scrolling. If you look at ".SpinWrap h1" i can achieve the result by doing this hack of creating a wrap and target ".SpinWrap" and ".SpinWrap h1" by this way both gsap timeline and scroll trigger keep playing the way i want but i want to know is there any way that i can get the same result without creating wrap or targeting the same element.
-
thank you @OSUblake and @GreenSock for clarifying using script url and yes we should test the latest version is working fine then use it. thank you so much again.
-
this is how i do on my websites, i add cloudflare gsap url for gsap and scrolltrigger at the end before closing of </body>. what i need suggestions is as we get new updates on gsap i goto my old websites and folders and manually do change on each html pages like "gsap/3.8.0/gsap.min.js" to "gsap/3.9.0/gsap.min.js" is there any better way of doing it like is there any URL link which automatically get updated or they always have updated GSAP script urls inbuilt something like that. <!DOCTYPE html> <html lang="en"> <head> <title>GSAP</title> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script> </body> </html>
-
i want to thanks @OSUblake and @Cassie for always helping me learning new things in GSAP and thanks everyone in the gsap family and community, you guys are amazing.
-
thats so amazing that we can use trigger: span, actually my mind is still processing horizontal scroll without this new feature of containerAnimation: scrollTrigger, thats why i didnt think of this
-
i dont understand by add a function to an object, its advance stuff for me ?
-
ok so if you open my codepen website then scroll to section B then look at left side, i added START and END trigger on the left side of sectionB sectionB has width of 150vw and span width is 100vw, what i want to do is add START and END trigger on the left side of SPAN element. i can do this manually for all the sections but i want to know is there any way of doing it dynamically with all the sections of different width sizes
-
for example what i trying to achieve is set start: "16.7% 100%", end: "16.7% 0%", at start left side of Section B
-
https://codepen.io/AkhilRaja/pen/poWVeKe now i need help with two things 1 -how can i do this like add ease: sine.inOut with snapArray() funtion snap: { snapArray(), delay: 0, ease: "sine.inOut" } 2 -how can i add start: "16.7% 100%", end: "16.7% 0%", dynamically to active thisSection, im trying to add start and end at left side of 100vw section
-
i have few more questions i need some time but for now thank you on helping me on this @OSUblake and @Cassie
-
thank you so much @OSUblake its working now and i didn't think of this "2 - window.innerWidth / 2", it was crazy it work like this. let current = (prev + width / 2 - centerX) / totalWidth;
