popland

based on a sample i got here on the forum i come up with an infinite slider, now my goal is to have a sort of index below it that indicates the slide i'm in so that the the index grow and shrink (at the moment is static with the first active) based on the slide, and also clicking the index will move to the correct slide basically i need to know which slide number i'm in (so i know which is next slider too) and trigger a shrink animation on the current index and grow animation to the next index synced with the slide movement, hoping my explaination make sense! any help will be appreciated

noticed it! thank you... now that it works as expected im digging inside the modifiers Super thanks again

Sorry, for my bad explanation, i was trying to saying that the code you showed me, even if it correctly loops between the function, do not animate the images if you try this code (that is basically the one you provided with the addiction of a couple of console.log) https://codesandbox.io/s/distracted-cray-m3sem?file=/src/App.js the 3 images do not slide correctly, it only slide from the first to the second, then (even if the animate function is called) everything stops there

Thank you Zach tried your code, and it correctly loop indefinitely with 3 seconds pause (as you can see from my logs here https://codesandbox.io/s/distracted-cray-m3sem?file=/src/App.js), but it looks like after the second slide, everything stops, at every loop the images are not repositioned but stand stills

thank you @ZachSaucier i just posted my demo in a new post

following this topic i came up with a simplified version of it, it is correctly working at start, but the examples used button to swipe the images (or Draggable), instead i would like to call the "animate" function at intervals (without causing my javascript to infinite loop) here is my sample, when loading the first image is moved correctly, but then everything stops https://codesandbox.io/s/blissful-morning-w5kw2?file=/src/App.js

Any hint on how to "autoplay", like simulating a next click, pause 2 second, simulate a next... and so on

Thank you! in most of the carousel i see everybody assumes the width of the image is always constant in my case the image are different unknown sizes, the only constant size (but not in pixels, ottherwise it cant be responsive) is the "window" div im guessing its a harder problem of what i was thinking, considering the number of the image as dynamic, the widht of the image as dynamic and the need for responsiveness

Thank you! i was thinking about the container too, in my project im using gatsy img (i know we already discussed about "framework" specific topics) and probably the rendred image alread have a wrapper i can "intercept" i will surely add the overwrite thanks again

on my attempt to create in infinite loop (on an arbitrary number of images) i arrived at this point https://codesandbox.io/s/blissful-morning-w5kw2?file=/src/App.js i was able to position the image, having the the first already in place, and starting the loop but im still missing a couple of things - i need to stop the image in the center for X seconds - when the image leave the screen should revert to start so that the loop will repeat at the end any suggestion?

i have a gallery of images, hovering it i would like to scale to 1.1 (and that is simply done) but also skew it (using rotationX and rotationY) based on mouse position; at the moment im puzzled on how to convert the mouse position to the correct angle of rotation, i don't need the images to flip, just a subtle rotation that simulate the image being pulled by the mouse postion i tried with something like this let ry = (y / window.innerHeight / 2).toFixed(2); let nx = (x / window.innerWidth / 2).toFixed(2); this is what i got so far https://codesandbox.io/s/patient-platform-puq8q?file=/src/App.js

i understand that, and i alwasy did when i was in search for some help unlucky this time my "problem" is inside a nested component of a big gatsby project, and exctracting the part, would cost hours, anyway i'pretty sure of what my problem is; as i said in my previous post it's not an animation problem, the fact is that 10 images positioned absolute one over the other have a different behaviour whan you pass from the one blow to the one above, but once you reach the end to restart you have to pass from the one above to the one below (and this appear seamless only in certain condition. like constant animation between the one who come and the one who go, having bothi image of the same measure, and more)

it looks like a starting point, but on my side its not working (im sorry i can't make a codepen but the images come from a graphql and the code is a bit 'complex') my images are (sometimes) different in sizes and it looks the fade between them jumps around in timing, sometime looks the correct time, sometimes looks faster, sometimes the bigger image keep staying under the small one fading in without fading out. it looks like the main problem is the restarting point, all the images are positioned absolute piled one over the other (and that is correct), but at the end, the last image sit over the first, so the fade effect gets weird, for example if the fade out is longer that the fade in during the whole procedure it works correctly (new image appear over fast, the back one slowly disappear), but when reverting to start the appering one is behind the disappearing, so if it disappear slow it keeps showing over

At the moment i solved the image reference issue with the following: for (let i = 0; i < picRef.current.length; i++) { console.log(picRef.current[i].imageRef.current); imgObj[i] = picRef.current[i].imageRef.current; } so i can pass imgObj to my timeline and animations so now im working on having a list of object to pass (fade or swipe or zoom or any other anymation) from one to another in a seamless way, with no delay/animation on first and animation when looping back to first, still with some "glitch", but hoping to solve it soon

I have a list of images (i know the number before starting the animation), and i'm trying to fade (or even swipe, at the momenti dont care, i just need to find a solid way to pass from an image to another) between them in continous loop. i tried with something like this vat tl=gsap.timeline(); tl.set(imgObj[0], { opacity: 1 }); //so the first image is immediatly showed function objani() { var otl = gsap.timeline(); otl .to(imgObj, { duration: 2, opacity: 1, ease: 'power4.inOut', }) .to(imgObj, { delay: 5, duration: 1, opacity: 0, ease: 'power4.inOut', }) return otl; } tl.add(objani()).repeat(-1); but, of course, all the images animatio are executed together any suggestion on how to stagger a list of something, maybe removing the first .to for the first image and at the end continue seamlessly to first? fade is just a placeholde, the image could swap with zoom or swipe or any other transition

Thank you for your exhaustive answer, i tried with the ref, but it seems if i have have an array of image the ref (even if created with a function) its always the same, so my animation is not working as expected (need to investigate more, maybe there is something im missing) i used something like let picRef = useRef([]); {content.image.map((simage, i) => { return ( <Img ref={(el) => (picRef.current[i] = el)} style={{ position: 'absolute', transform: 'translate(-50%, 0)', height: '100%', width: '90%', top: '30px', left: '50%', marginLeft: 'auto', marginRight: 'auto', }} fluid={simage.childImageSharp.fluid} imgStyle={{ objectFit: 'contain' }} className="currimg" /> ); })} but when i try something like: console.log('tes', picRef.current); for (let i = 0; i < picRef.current.length; i++) { console.log(picRef.current[i].imageRef.current); } gsap.fromTo( picRef.current, { opacity: 0 }, { stagger: 2, duration: 1, opacity: 1, delay: 0, ease: 'power4.inOut', repeatDelay: 2, repeat: -1, } ); the reference to the image is logged properly to the console, but i really cant understand how to pass the reference to gsap

I have a gallery of recent work made in react/gatsby, using the gatsby-img Img component, basically every works got multiple image attached (got them from GraphQL, so i cant post a codepen), my goal is to display for every work its first image and the "randomly" fade to the second, to the third and so on my code actually looks like: <div id="worklist" className="w-100 flex flex-grow flex-wrap mt-10"> {currPort && //currPort contains the latest work objects currPort.map((P, i) => { return ( <div key={i} className="w-full md:w-1/2 lg:w-1/3 p-5 "> {P.image && ( //image is array of image objects, here using Img i only print the first image <Img fluid={P.image[0].childImageSharp.fluid} className="test" style={{ height: '350px', width: '100%' }} imgStyle={{ objectFit: 'cover' }} /> )} ); })} </div> this code for every Img reneder a wrapping div (with class test in this case) with a picture tag and inside it a img tag that have size, srcset and more and no way to reference it from gsap, any workaraound suggestion?

Thank you, i will surely chek that link

I played with it a bit and have it to work, but i dont know if this is the exact method, since the footer is absolute position i thought it would need a both "from" and a "to" animation, but even if it works, im not still sure i coded it the right way

I'm trying to make something that apparently is easy, but i cant get out; basically i have a link at the bottom of the page, when i click the link i would like a footer appear sliding up, and when in the footer i click another link, the footer slide back. I made up 2 animations (im working in react) to which i pass the div to animate <div className="fixed bottom-0 left-0 mb-2 ml-2 text-sm uppercase"> <div className="flex"> <div className="relative"> <button onClick={handleColophon} disabled={disabled}> {state.menuName} </button> </div> </div> </div> <div className="fixed bottom-4 left-0 w-3/4 h-32 hidden" ref={(el) => (cWrapper = el)} > <div className="relative text-sm uppercase bg-gray-200 h-full p-5 m-2 overflow-hidden " ref={(el) => (clf = el)} > <div className="flex"> <div className="relative"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos eum iste temporibus magnam assumenda quas ad dolorum quaerat corrupti et odio vitae iure aspernatur aperiam, deleniti cum! Consequatur, rem quibusdam! </div> <div className=""> <button onClick={handleColophon}>CLOSE</button> </div> </div> </div> </div> export const ColophonOpen = (clf) => { gsap.from(clf, { duration: 0.7, y: 300, ease: 'power4.inOut', transformOrigin: 'left bottom', }); }; export const ColophonClose = (clf) => { gsap.to(clf, { duration: 0.7, y: 150, ease: 'power4.inOut', }); }; also, the animated div is inside another fixed position div that is shown before the animation and hidden after. The animation works correctly for just two cycle, it starts hidden, when i click the button it slides up, when i click the close button it slides up, but then it doesnt slide up again; i think it is something that have to do with y and transformOrigin this is the div after the first click (it slides up): <div class="relative text-sm uppercase bg-gray-200 h-full p-5 m-2 overflow-hidden " style="height: 100%; opacity: 1; transform-origin: 497.5px 64px; transform: translate(0px, 0px);"><div class="flex"><div class="relative">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos eum iste temporibus magnam assumenda quas ad dolorum quaerat corrupti et odio vitae iure aspernatur aperiam, deleniti cum! Consequatur, rem quibusdam!</div><div class=""><button>CLOSE</button></div></div></div> and this is the div after i click close (sliding down) <div class="relative text-sm uppercase bg-gray-200 h-full p-5 m-2 overflow-hidden " style="height: 100%; opacity: 1; transform-origin: 497.5px 64px; transform: translate(0px, 150px);"><div class="flex"><div class="relative">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos eum iste temporibus magnam assumenda quas ad dolorum quaerat corrupti et odio vitae iure aspernatur aperiam, deleniti cum! Consequatur, rem quibusdam!</div><div class=""><button>CLOSE</button></div></div></div> then clicking again to show, i see that translate changes, but the revert to 0,150 and the div stays hidden any suggestion?