maxvia

This is great @Rodrigo! Thank you very much for the detailed answer and exemple ?

Hi guys, How would you proceed if you wished to clean up old animations following a window resize? I have a global state (redux) within my app that updates after window resizing. I have tried to connect my components that use gsap animations to this global state width and useEffect(). It seems to be working fine meaning that the animations are restarting when I resize however the old animations are still running so it gets messy. How would you guys handle this? Thank you!

Thanks a lots @ZachSaucier. probably explains why I missed that ?

The images are now moving fine and the infinite loops works. What still does not work is the offset not being taken into account even though when I console.log it i can see when I enter the scrolling area that my offset value changes but the images are not moving faster. Any idea what is happening? Thank you @ZachSaucier I dont think so. imgArrConst.map((img,i) => { let imgWidth = img.getBoundingClientRect().width //initial left position depending on previous photos let leftPosition = imagesPosition //positioning the images before moving them gsap.set(img, {left: (leftPosition) } ) imagesPosition += imgWidth //calculating total imgs width totalW += imgWidth //create hash of width per index imgWidths[i] = totalW }) This fonction above allows me to calculate the totalW of all images combined. I console.log(totalW) and it seemed to give me the appropriate value.

Hi guys, I has been some times I am trying to figure out how I should proceed with an infinite carousel with images of different widths. Here is my code pen https://codepen.io/skima37/pen/JjRywdM On codepen the images are not moving but it is working fine on my computer. I am guessing that the code I juste added is not optimised enough (specially the first animation)... The weird part that I dont get is that my offset initiated through scrolling doesnt work however when i console.log() into the modifiers of my first function I can see it recorded but the images dont move more rapidly. Any idea how I could optimise this code and why offset doesnt work? Thank you!

This is awesome. Thank you all ?

Hi guys, I am trying to make the following animation. https://rino-pelle.com/contact/ (round text moving) The first question I have in mind is, is there any way with gsap to make a circle out of a text? Also, as you can see, when scrolling down the speed of the rotation rises. Do we have any similar codepen that I could use to get inspiration from ? I tried to search within the forum but didnt find. Any help is appreciated. Thank you very much!

Thank you @ZachSaucier !

As you can see above the way I have implemented is, each element should be wrapped into a different wrap(). Meaning, the element that is the most on the right needs to travel more towards the left in order to complete the window. FOr some reason this is not working and each element are travelling the same width... I am really confused on how I could do that. Also it seems to be very ineffective. Couldnt find anything on the forum that is similar. Any help is appreciated. Thank you

Hi Guys, How would you deal with images of different width to make it infinite ? https://codepen.io/skima37/pen/JjRywdM THanks!

Great. Thank you for the answer @ZachSaucier, I was actually looking at some website and saw that they only had one text element however they duplicated the words inside that text element. They probably splitting it up by words then. Make sense. Thanks!

Hi guys, I dont understand how I can wrap a big text in order to have an infinite horizontal text. I am trying to reproduce Mikel code pen https://codepen.io/mikeK/pen/oNXoOBq but with one text bigger than window width. Here is the codepen I created and would like to tweak accordingly. https://codepen.io/skima37/pen/ExgvLLL Any tips or help is appreciated. Thank you!

Hey Zach, assigning my ref to a new Const inside my useEffects seems like it is solving my issues! Thank you

Hi guys, How do I handle having multiple ScrollTrigger functions within 1 component. When I do that it gives me a 'GSAP target null not found.' Thanks const Test = () => { let text = useRef() let mainContainer = useRef() useEffect(() => { ScrollTrigger.create({ trigger: text, start:"top 50%", end: "bottom 50%", onEnter: function() { //gsap function }, )} ScrollTrigger.create({ trigger: mainContainer, start:"top top", end: "bottom 50%", onEnter: function() { //gsap function }, )} },[]) return( <div ref={mainContainer} > <div ref={text} > This is a text </div> </div> ) }

Hi, I am trying to wrap my images in order to have an infinite animation. I tried to use the wrap method but wasnt successful. I used to simply duplicate my images and it would work "fine" for most cases but not all. How would you guys do such a thing with the following codepen : https://codepen.io/skima37/pen/dyppXEO Thank you!