monema

I know i should make a codepen, but it's gatsbyjs and i don't know how to replicate all the things. I just triyng to reverse the timeline.current in this component Play is ok, but the reverse jump directly to first frame animation (which is autoalpha: .0) whitout tweening anithing. ...and i'm feeling blue... import * as React from "react" import { gsap } from 'gsap' import { useRef, useEffect } from 'react' function Scritte({ app, mouseOut }) { const scritte = useRef() const timeline = useRef() timeline.current = gsap.timeline({ paused: true }) timeline.current .add("start") .fromTo(scritte.current, { autoAlpha: .0 },{ autoAlpha: 1 }) .add("stop") useEffect(() => { app ? timeline.current.play() : timeline.current.reverse() }, [app]) return ( <div className="scritte-home" ref={scritte}>{app}</div> ) } export default Scritte Thank you so much for any kind of help

Hi everyone. As usual...got some problems... This time i've an array of images. Then i've got an mouse driven event that fires an animation. Now i'm trying try to do that: The user click some element ---> i take a random element from the array ---> pass the element to the timeline as parameter ---> fire the animation with the mew element So everytime the user clicks, a new image is taken by the timeline. I don't know if is even possible, i look around in the forum but no luck. Thanks in advance to you all

Sorry i wrote in a hurry. The stuttering is may related to the svg...i'm not able to put everything in codepen...i need just some ideas or advice!

https://gallant-meitner-fe64bf.netlify.app/ Hi! I've made some animation test for a new website. If you hover the "we" word and wait some ms, then you can click on the word "are". If you load the first time the animation stutter so much The entire site is made in hugo Thank you so much in advance

Ok thank you very much i've solved looking at the first video. You're amazing!

Hi to every one, can i use a complex timeline as a bundle of sub animations. For ex. i got A to B to C to D now i got an event and i need just to play B to C or C to B. There's a way to achieve that, by...i don't now tagging or labeling around? Thanks

the second is exactly the solution. Thanks so much!

Ok now... i need to trigger an animation on click and at the same time,to reset from start one other animation so to make the usual toggle effects from two differen animations. It's not a reverse situation i need different behaviour from the two timelines So click a - play a - reset b to time 0 click b - play b - reset a to time 0. Thank you so much for the amazing support you are doin...and the patience too.

ok the problem was the anonfunc. to return the value updated... why do i need to do this? Just curiosity... Aniway, GRAZIE MILLE!!! is exactly what i was looking for. Thank you so much.

Ok hi evryone...i'm definetly a "nubbio" as we say in Italian. I've red almost avery post about the subject...so i think i'm missing something big here... Aniway i'm trying to do a very simple thing: I have an animation that uses some .getBoundingClientRect in order to get some positioning parameter. Now by click on a button i need to update the position on the animation. just because the object may need to change position. the animation is: xpos is the variable let xPos = document.querySelector('.we h1').getBoundingClientRect().left const animazioneImgBack = gsap.timeline({ paused: true, xPos: xPos }); animazioneImgBack.fromTo(wrapper, { backgroundColor: "#8099b7" }, { backgroundColor: "#EFDB59" }, console.log('test', xPos)) animazioneImgBack.to(".backtop", { delay: 0.3, duration: 0.3, autoAlpha: 0.4 }) animazioneImgBack.to(".backtop", { width: 500, height: 500, duration: 0.5, left: (xPos + 350),autoAlpha: 1, ease: "power3.out" }) animazioneImgBack.to(".we>h1", { color: "rgb(247 228 99)" }) animazioneImgBack.to(".backtop", { width: 400, height: 400, delay: 0.3, left: (xPos - 80), borderRadius: "50%", ease: "back.out(1.7)" }) animazioneImgBack.fromTo(".textinner.ecommerce", { autoAlpha: 0 }, { autoAlpha: 1, ease: "back.out(1.7)" }) animazioneImgBack.to(".backtexttop", { duration: 1, x: 0, autoAlpha: 1, ease: "back.out(1.7)" }) the point is: How can i update the xPos variable by clickin on a button? As you can see i console.log in the first line of the animation. I discovered that the value is acquired at runtime and never updated. the timeline is not going to update the value when i play the animation. It's keepin the same value. I hope this make a sort of sense. Thank ou so much.