Toso

hi @Semih to be honest I'm not sure what you want to do here since in the code you are just selecting the first element with querySelector adding an active class to it and removing it when onLeaveBack , for a starting point you need to use the gsap.context() inside your useEffect or useLayoutEffect and here is a demo of how it works with react/next https://gsap.com/docs/v3/GSAP/gsap.context()#react-demo or you can use useGSAP() hook its easier https://gsap.com/resources/React#usegsap-hook- something like this https://stackblitz.com/edit/stackblitz-starters-r9fccn?file=src%2FApp.js Here's just pinning the .sas div with one ScrollTrigger and the other loop to toggle the class active between them

here you go, i just added ease:'none', and also now it's working on the img, not the .box so you don't have this overflow issue with the body https://codepen.io/ahmed-attia/pen/WNmboRx

hi @akyn try to watch the video and follow the steps while installing if you already did that, you can jump into this topic they already covered this issue

hi @Tulip781 i think this video is a good starting point

hi @Roco i think you need to check scrollTrigger ofc I don't know what you are trying to build here without a demo but here is a place to start from https://codepen.io/GreenSock/pen/RwPXQOQ

in this code you didnt actually put your tween inside the context so you need to add it inside the context and check if this works cuz im unable to check in sandbox also you can switch to useGSAP() hook https://github.com/greensock/react so your code will look like this const container = useRef(); useGSAP(() => { // gsap code here... }, { scope: container }); // <-- scope is for selector text (optional) and since you are using frameworks you can create your demos here much faster https://stackblitz.com/@GreenSockLearning/collections

@GreenSock is it always bad to animate the trigger element or only when its pinned ? you mentioned its happening in the parallaxTimeline version but does the same problem happen in the loop version ?

hi @Georges-jean forgive me but I was unable to test directly inside your demo since it's not minimal and i usually get lost easily but since you want to go with the second option you don't need to create a new timeline inside forEach loop instead you can pass the scrollTrigger inside the tween like this gsap.utils.toArray('.element').forEach((e) => { gsap.from(e, { ... scrollTrigger: { trigger: e, start: 'top 70%', end: '+=500', scrub: true, }, }) }) for the resize problem you can try this code in a minimal demo and let's see what happens cuz, as far as I know, ScrollTrigger automatically listens for a resize event

hi @Ritik most of your questions are already in the docs so i didn't want to make my answer 100 lines so focused only on few things that might help I would recommend you use signals instead of react states, preact signals are faster and do crazy work under the hood and work like a charm with react, especially when you are trying to update something in a different component and you do not want to rerender some extra component with it so take a look on this one https://preactjs.com/guide/v10/signals/ https://www.npmjs.com/package/@preact/signals-react also, this stackblitz collection will help you with future demos since you are using react https://stackblitz.com/@GreenSockLearning/collections The last thing you can now use usaGSAP hook for react https://github.com/greensock/react and you can still pass the func as you want inside the timeline but here you are animating all the sections with one tween so you will get only one call like onStart will be working one time for the whole tween not for each section there, not sure if you asking about timeline properties or scrollTrigger properties but both have their properties

hi @weinde there are no timelines in the code, not sure if you added the right pin so if that's the right one you will need to create 1 timeline and add all the animations to it, then you can play with the position param to choose what and when each element plays https://gsap.com/resources/position-parameter or check the cheat sheet https://gsap.com/community/cheatsheet/

no need to pass 2 scrollTriggers into the same timeline, I fixed that code and left some comments https://codepen.io/ahmed-attia/pen/ZEwNdGW and that another may be helpful https://codepen.io/ahmed-attia/pen/ExrzBgX?editors=1010 and this topic is the one you looking for if you want to jump into something cooler (clipPath, clip-path, SVG mask)

Hi @ninmorfeo as I can see you are trying to mix vertical and horizontal scrolling with the observer, did you see those demos? https://codepen.io/GreenSock/pen/YzEJBQm https://codepen.io/GreenSock/pen/ExEOeJQ https://codepen.io/GreenSock/pen/oNdNLxL I hope that helps, let me know the result

can you add the links here ? I think you added them as tags

hi @bleep i think this demo will be useful https://codepen.io/GreenSock/pen/RwKwLWK

There are a lot of online stores that create custom t-shirts and prints 1-find one of them online 2-choose a t-shirt from their collection 3-send them the logo you want

That's Great thank you 🫡, a lot of ppl were asking about this lately me included. 😍 but they will skip this and create a new topic anyway . 🫣

make sure to take a good look here, Passing a timeline prop is already on the react-advanced page so maybe it will help you with next https://gsap.com/resources/React/ https://gsap.com/resources/react-advanced also, this guy creating some cool animations with GSAP with Nextjs https://www.youtube.com/@olivierlarose1

hi @jdion84 it would be easier if you can create a demo and since you are using react you will find this stackblitz collection very useful https://stackblitz.com/@GreenSockLearning/collections for further info on how to create a demo

no >>> normalize: true yes >>>> ScrollTrigger.normalizeScroll(true) ss @stefanobartoletti i get it wrong but leaving my wrong answer in case anyone else misunderstood https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()/

thank you @helden for sharing your solution, yes, we need to keep up with all the browsers updates and different behaviors for desktop and mobile, they just update to fix 1 thing and break 10 things 😂

almost forgot, tailwind has these kinds of simple animations built in already so you can use them on the go like animate-spin https://tailwindcss.com/docs/animation

yes as @alig01 said this could fix the problem it was the first thing to search about in tailwind to use will-change-[value] https://tailwindcss.com/docs/will-change#optimizing-with-will-change but when I updated the tailwind you used from 2.2 to the latest version 3.3 everything worked normally without using the will-change also what if you just added the blur in the SVG while exporting it? 🤔 🤔 🤔

my issue was happening also inside Chrome, but since it's a simple shape we created the blur with the shadows, not filter:blur it would be better if you could add the code you tried with the demo, its easier to test it and find the problem

hi @Abubakar.Butt89 I would suggest keeping all the questions in one topic since they all related to the same issue, and also creating a minimal demo that focuses on the issue without all the additional HTML and CSS and jQuery would be awesome for ppl like me with Goldfish attention span 😂

hi @TezzyBear im not sure what you are trying to build here since there is no codepen demo to see your use case but maybe give a try quickTo and quickSetter , or just go lazy mode and add the tween inside an eventListener for the resize but still, it depends on your use case may be matchMedia can help you also 🤔 I'm interested in what you are building that requires user resizing in the middle of the animation