Search the Community
Showing results for tags 'To'.
Found 12 results
-
react GSAP Does not repeat animation when re-entering the page
Zhulinskiy Danil posted a topic in GSAP
The animation plays while I'm on the page for the first time, after I exit and come back - the animation stops playing I tried: timeline put in useRef gsap.context and subsequently revert Manually clear timeline using kill A simple example that also doesn’t work for me: Here is a link to a site where the text with the same problem is https://next-resume-hazel.vercel.app/ Wait for the full animation and intensity approximately, then go back by clicking on the RESUME title and the text will not animate again. (This post was completely translated using google translator, sorry if anything is not clear) import gsap from 'gsap' import { useEffect } from 'react' export function Component() { useEffect(() => { const obj = { n: 0 } // This will only work while I'm on the page for the first time // If I go to /about, or any other page, and go back, // code block below - will stop working and output the object to the console // Although if you look in _gsap the id of the animation is different from the previous one // Also, not only to but also from, timeline and other things stop working // with which you can smoothly change values gsap.to(obj, { n: 1000, duration: 1, onUpdate() { console.log(obj.n) // 0 - 1000 } }) }, []) return <></> } -
Hi, I would like to be able to navigate between two scrolling sections. Right now it works, but how can I be sure to always go to the beginning of the section? Also, I want the animation to be instantaneous. Also, there is a weird stutter sometimes once I have navigated to the section. Not sure what is causing that.
-
When creating a timeline for parallax images on scroll, my images only animate on-by-one rather than all at the same time. This is my code: useLayoutEffect(() => { const ctx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { pin: true, trigger: main.current, start: 'bottom bottom', end: 'bottom top', scrub: 1, markers: true } }); tl.fromTo(parallaxImage1.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage2.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage3.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage4.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage5.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage6.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); tl.fromTo(parallaxImage7.current, { filter: 'blur(12px)', y: '100%' }, { filter: 'blur(0px)', y: '-100%' }); }, main); return () => ctx.revert(); }, []); What am I doing wrong? -
I wrote the following code to change the shape of svg, but this code has a problem. I want the color of #rect to change at the same time every time atr changes. Is it possible to do the same code with another solution? var tl = gsap.timeline({}); //2 tl.to("#Tear", { attr: { d: First } }); //3 tl.set("#rect", { attr: { style: "fill:#FB7185" } }).to("#Tear", { attr: { d: Second } }); //4 tl.set("#rect", { attr: { style: "fill: #38BDF8" } }).to("#Tear", { attr: { d: Third } }); //5 tl.set("#rect", { attr: { style: "fill: #A78BFA" } }).to("#Tear", { attr: { d: Fourth } }); const scroll = ScrollTrigger.create({ trigger: ".J02ig", pin: true, scrub: 0.5, start: "top top", end: "max", animation: tl // onToggle: self => console.log("toggled, isActive:", self.isActive), // onUpdate: self => console.log("direction:", self.direction) }); scroll.scroll();
-
i think i have to do something similar like this(Looped "scrolling" section) or this this(the red panel animation) to achieve the background effect. i dont know how to implement though can you guys help? check out this video i am talking about this
-
Hi! I am really loving Green Sock! I have an animation working, but I am wondering if there is a way to animate all elements at the same time in the same timeline, if that makes sense? See my codepen (you may want to view on codepen or resize the codepen window to see it clearly). My goal with this is to have each box fade in and transform/translate/scale all towards the center of the section and then to fade out at the same time. But, I am trying to get them to do this all at once and to come from different directions. I tried chaining .from().from()'s, but this just plays one and then starts another. I tried something like: tl .from(".icons-animated #HumanStars", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}, ".icons-animated #HumanStars strong", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}); but this doesn't seem to achieve my goal. Is there a way to animate .from() and chain the animations inside that from? Which methods should I be reading about/what is the syntax for this if it exists? Or am I not approaching this the right way? Thank you so much.
-
Codepen doesnt work btw dont know why.. Hey guys what i want to do: animate them out of the screen then animate them all 3 at once back. How do i do this? i commented out the .from because it will do that first and then the rest of the code. Why is this? Ty guys
-
I have animated an element's attribute using TweenMax like this: TweenMax.to($(".element"), 2, { rotation : 180 }); Later on, I need to get the value of the rotation, is it possible? Something like this: TweenMax.getValue($(".element"), "rotation"); // just an example How can I get the value of an attribute animated by TweenMax?
-
Such as dealing of cards. You are doing a similar animation but each element ends up in a slightly different position. I know I can animate them one by one and delay each one slightly like in the example code below but is there a shorter and more effective/elegant way of doing this? Thanks in advance! .to('.element1', 1, { x: "+=30", ease: Power3.easeInOut }, "frame1+=1") .to('.element2', 1, { x: "+=60", ease: Power3.easeInOut }, "frame1+=1.15") .to('.element3', 1, { x: "+=90", ease: Power3.easeInOut }, "frame1+=1.25") -
I'm drawing a large shape using an array of points in a for loop and tweenlite as found at http://www.flashperfection.com/tutorials/Animated-line-drawing-using-TweenLite-in-AS3-22013.html for(var i:uint = 0; i < pointsArray.length; i++){ TweenLite.to(dot2, .05, {x:pointsArray[i].x, y:pointsArray[i].y, delay:i*.05, overwrite:false, onUpdate:updateHandler}); } function updateHandler():void{ lineAnim.graphics.lineTo(dot2.x, dot2.y); lineAnim.graphics.moveTo(dot2.x, dot2.y); } I would like the animation to complete before continuing, but I'm unable to find a way to be notified when the full animation is complete. onComplete does not work as it triggers on the first set of coords. I also tried triggering when i == pointsArray.length but the loop finishes multiple seconds before the animation completes. I would like to avoid using a timer.
-
THIS THING IS DRIVING ME MAD .. PLEASE HELP ! var w = 25; var timeline = new TimelineMax(); var mc1 = new TweenMax(); var mc2 = new TweenMax(); timeline.add( [ mc1.to($('#selector'), 10, {backgroundColor:'red'}), mc2.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }}) ],0,0); // so currently the animation pauses at 2.5 secs instead of 10 // how do i alter mc2's tween now that it has finished, with it staying in the same timeline // I tried this .. (it doesnt work) timeline.append( mc2.updateTo($('#selector'), 5, { width: "50%", onComplete: function(){ timeline.pause()} }, false) );
-
Hi, i need a timeline to stop at a certain point. I remember in AS there is something like tweenTo. How can i achieve this in javascript? Thank you Jan
