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!

Thank you @ZachSaucier, this works out good at the moment except the flashing. In this particular exemple. Is it the wrapping + the updateProgress function that makes the animation infinite?

I created the following codepen with the pseudo code you gave me. https://codepen.io/skima37/pen/QWKEevR As you can see, the first method is working fine however the second one (the one using scrolltrigger) is buggy at the moment. What I basically want is that whenever I am scrolling and I am within my scrolltrigger area, I want my images going left faster relative to my scrolling activity. Thank you Zach

thanks for the reply Zach So this wouldnt work if I add a duration value? items.forEach(item => { gsap.to(item, { x: -containerWidth, modifiers: { x: gsap.utils.unitize(x => { (parseFloat(x) + additionalY.val) % -containerWidth }) } }); }); I wanted my animated to go over all the picture within 40 second so I added to duration: 40 as a paramaters. If i remove the duration parameters it goes way to fast. It takes about one second to go all over the pics. It was working fine, meaning all the pics were moving on their own, however I tried to give a value to additionalY.val to see if it would go faster but it was changing changing anything. Animation was not going faster. Also, sorry but I am confused about this part? if (velocity > 0) { additionalYAnim = gsap.to(additionalY, { y: 0 }); } Did you mean the array of items instead of additionalY?

hey @ZachSaucier, Thank you for pointing out the different options I have however after some hours looking for the solution, I wasnt able to come to a good one that. I first took care of the scrolltrigger method this way: const imagesScrollerTrigger = ScrollTrigger.create({ trigger: mainSection, start:"top 50%", end: "bottom 50%", markers: true, ease: 'none', onUpdate: function(self) { let velocity = self.getVelocity() //first image let axis = images[0].getBoundingClientRect().x firstImagesAxisValue = axis if (velocity > 0) { gsap.to(moveImages, { ease: "none", x: calculateNewX(velocity, axis), modifiers: { x: gsap.utils.unitize(x => parseFloat(x) % -window.innerWidth ) }, }) timelineImage.pause() } } }) I am quite happy with my scrolltrigger. It is working fine and the images are moving to speed I like. Also I dont want them to move on scroll up thats why I only make change is the velocity is positive. then I set up a timeline as follow : let timelineImages = gsap.timeline() timelineImages.fromTo(imagesArray, { //x value of my first image x: images.current[0].getBoundingClientRect().x, } , { ease: "none", duration: 40, x: -window.innerWidth, repeat: -1 }) } My first intention was to do when scrollTrigger onUpdate isActive => timeImages.pause() and when onUpdate is not isActive => timeIineImages.play() or .restart() (in order to have a new accurate value of from x, since this one was modified by the scrolltrigger) Is there anyway to do such a thing or I try another way? Thank you!

Hi, I am trying to implement the first horizontal section effect of the following website: https://rino-pelle.com/ Images are moving from right to left when you are not doing anything BUT moving faster when scrolling down. I know how to accomplish the first part using as example the following code: gsap.to(movableImageWrapper, { xPercent: -100, duration: 40, repeat: 100, ease: 'none'}, '<' ) I also know how to accomplish the 2nd part using scrolltrigger: gsap.timeline(movableImageWrapper, {xPercent: -100, scrollTrigger: { trigger: mainSection, start:"top 50%", end: "bottom 300", scrub: true, toggleActions: "play none none none", } }) However where I am confused is how to combine both because if I try doing this my scrolltrigger function will move my images depending of their original axis not the current one (not sure if I am clear). How would you guys proceed with that? is there anw to track the first transformation ? Thanks for the tips Btw I am using react but js is fine as well Thank you

Hi guys, Is there any simple way to change the background color of a div from top to bottom and vice versa? Thanks! p.s: I was trying to add a small video of it but was limited to a file of 25.8kb?

Hey @akapowl, thanks for the reply. I did try with locomotive or smooth-scroll but I have the same issue still happening. I believe it is probably a react issue with my dom fully loading after my gsap animation so that the height given to gsap is wrong. Anyway for now I will live it aside because I am not so sure I want some smooth scrolling on my app for user experience.

Hi guys, I have added smooth scrolling within my application using locomotive. I have added it on top of my App component. It is working good and is not messing up with my animations that use scrolltrigger within my main App component however my animations that uses scrolltrigger within my children components don't work anymore. My triggers markers disappeared. In my main component I have added: const locoScroll = new LocomotiveScroll({ el: smoothScroll, smooth: true, }); locoScroll.on("scroll", ScrollTrigger.update); I am sure it is something dumb but what is the norm for working with both (gsap and locomotive) within React? Thank you!

Awesome ! Thanks a lot @akapowl. Works like a charm for my footer but now is messing up with some of my animations using scrolltrigger in other components but thank you!

Hi @akapowl, thank you so much for your detailed answer as well as all your demos!!! it's awesome. So far I have just incorporated the first version with gsap only because I am not familiar with smooth scrolling and never worked with this library as well. I will look at smooth scrolling this coming week because even though gsap makes it super nice and really easy, smooth scrolling makes this effect even neater. Once this is done I will try to upload a pen for all the react users. Once again thank you for your time and explanations! Maxime