Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by AkhilRaja

  1. thank you @OSUblake im looking for this explanation.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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>
  8. 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.
  9. 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
  10. i dont understand by add a function to an object, its advance stuff for me 😭
  11. 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
  12. for example what i trying to achieve is set start: "16.7% 100%", end: "16.7% 0%", at start left side of Section B
  13. 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
  14. i have few more questions i need some time but for now thank you on helping me on this @OSUblake and @Cassie
  15. 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;
  16. https://codepen.io/AkhilRaja/pen/poWVeKe this is the best i can do and im also bad in maths class
  17. i try to read them and understand them but its too advance for me i cant understand it 😭
  18. this is what i want to do https://developers.google.com/web/updates/2018/07/css-scroll-snap#example_-_horizontal_gallery here its stop at the center https://snap.glitch.me/carousel.html its css snap but i want to do this with scrolltriger snap
  19. i cant find what i was looking for in the given link
  20. i have this horizontal scrolling website with different width per sections, what im trying to do is that when i stop scrolling it should scroll snap at the center of the current section, for visual i added span with 100vw with black color opacity box.
  21. thank you @Cassie and @OSUblake for helping me on this. it was interesting topic and i learn so much from it.
  22. thank you @Cassie for creating this second way doing it with speed but i want to create this which i tried in my original code 1. so when mouse move all the images will size from (0 to 1) with stagger animation. 2. all the images will be follow mouse cursor position which is working fine. 3. if mouse movement stop then image will size to (1 to 0) with stagger animation. 4. when mouse move all the images should hit (0 to 1) and then mouse stop and images will goto (1 to 0) and if i move mouse again then it should stop this animation "sizing (1 to 0)" or override it and play it something like (0.7 to 1). Now if you see my original code all 3 points are following it but 4rth one is glitchy, sometimes it work and sometimes it doesn't and in @OSUblake code all 4 points are working but in 4 point sometime it has glitch of uneven size like (0.2, 0.7, 0.5, 0.3, 0.8,) its working but if images size can keep the stagger timing of image array 0 index to 3 as increasing or decreasing order size like (0.9, 0.8, 0.7, 0.6)
  23. its still not working smooth or fine, i see stagger is look like off time or something, like image 2 is big and image 4 is big and rest of them getting small. Its only happen when animation gets complete and images getting small with no mouse movement.
  24. im trying to create this animation but its glitching for some reason i cant find, i tried to add delay: and then i use "<+=2.5" but its not working, sometimes it work if i dont move my mouse too much. please can anyone tell me where i made mistake or is this is the wrong way of making this timeline. thank you
  25. thank you so much @Cassie for helping me on this, i never heard of e.target.id its really new for me and its so helpful feature.