amapic

Hello, Sorry for asking this but I don't succeed to make it work: var tl = gsap.timeline({repeat: -1, repeatDelay: 0}); tl.to(element, 5, { motionPath: { path: [ // { x: "0vh", y: "0vh" }, { x: "10vw", y: "10vh" }, { x: "-10vw", y: "70vh" }, { x: "0vh", y: "0vw" }, ], // you probably want more points here...or just use an SVG <path>! curviness: 2, // align:"self" // autoRotate: true }, ease: "none", // clearProps: 'all' }); I just want an element to make a curvy triangle movement and go back to its initial start. Working with vh and vw is good I think to adapt to screen size changes. As far as I have understood, coordinates are here in relative position regarding the initial position of the moving element. For the moment, I got a jump at the start of the movement, I saw align and alignOrigin are here to fix this problem potentially but I don't get it at all. What to do ? thanks

Thank you.

Hello, I would like to reproduce the fifth screen of this website (with the "zoom"animating) : agap2.fr . It's based on a scroll trigger and there is snap on labels every 100px. What is the best way capture the snap parameters of this website ? Also, is there a way to only snap to the next label ? I mean to forbid every return to the current label if we didn't scroll enough to the the next one. It seems to me that it works that way here. I wish I am clear enough and sorry for my bad English. Thanks for your help. snap: { snapTo: "labels", // snap to the closest label in the timeline duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity) delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping ease: "power1.inOut" // the ease of the snap animation ("power3" by default) }

That's it. Thank you. Sorry for not being clearer.

Basically, I would like to chain 2 animations with the same element pinned If the first animation is limited by: start: "center center", end: "+=900 center" how can I start the second one as the center stays at the center ? This won't work: start: "center center", end: "+=900 center" nor this: start: "center+=900 center", end: "+=900 center" I put in the codepen an example. After the black circles reach the center of the screen, I just would like any other animation to start with the ".flex" element staying at the same place. Thanks for you help.

Thank you

Hi, It must be a very simple problem but I have already spent a lot of time on it. I have a classic implementation with react of onEnter, on leave function on a html tag: <div onMouseEnter={onEnter} onMouseLeave={onLeave} > const onLeave = ({ currentTarget }) => { // gsap.to(currentTarget, { backgroundColor: "#28a92b", scale: 1 }); gsap.to(currentTarget, { // clipPath:"polygon(50% 0, 50% 0,100% 50%, 50% 100%, 50% 100%,0 50%);" clipPath: "polygon(0 0, 0 0,0 0%, 0% 0%, 0% 0%,0 0%);", }); // <-- gets added to the Context! }; const onEnter = ({ currentTarget }) => { // gsap.to(currentTarget, { backgroundColor: "#e77614", scale: 1.2 }); gsap.to(currentTarget, { clipPath: "polygon(25% 0, 75% 0%, 100% 50%,75% 100%, 25% 100%, 0 50%)", }); }; Only the first one (onEnter) is working here. If I permute them, the first one keeps being the only one working. So it must be a problem of conflict between the two tweens. My code is accessible here https://codesandbox.io/p/github/amapic/planet_next3/draft/vigilant-banzai I would like the clipPath to evolve in the header component. The code is in the file located at components/header.jsx I tried this before with using "context" as it is mandatory normally with react but I had exactly the same problem, only the first one was triggerring. My code for this is present and commented in the file. How would you do ? Sorry for the style of the text here.

thanks again for your reactivity, it works perfectly

Ok thanks you both. I must be linked to react as it is very simple, I managed to make it work easily inside the code pen you created. I will try it with react now.

Hello, It is a very basic feature provided by scrollTrigger but I don't manage to make it work. Here's what I have done : https://codesandbox.io/p/github/amapic/agap22/draft/youthful-babbage I would like the "zoom" sentence to be not pinned anymore and thus to stay where it is at the end of the animation. For me, my code is equivalent to this one : https://cdpn.io/pen/debug/JjBwYaE?authentication_hash=bZrQWGzJymvk where the sun stay in place at the end of the animation. What is wrong with what I have done ?

thanks for all

I made here a basic animation of a div which is following the cursor as it enters or leaves a space: https://codesandbox.io/p/sandbox/eloquent-almeida-wujeen it works quite well (not perfectly). Not to trigger the enter and the leave animation together, I made some control with isActive() and then I launch restart(). But what are actually the good practice about this subject ?

the solution might be here actually : https://codesandbox.io/s/cold-http-40fl1?file=/src/App.js comong from here :

I went to this page of documentation : https://greensock.com/docs/v3/GSAP/gsap.context() to try to implement this but I can't make it works. For me, there's not enough details actually on this page but it must rather be a problem of well understanding of react useRef/useEffect and document.querySelector. I put my code here and I must be very close to make it works find : https://codesandbox.io/p/sandbox/falling-river-ygqcdo I simply just want to change the border color of an element when it is hovered. How to do ?

Thanks