Search the Community
Showing results for tags 'callback'.
-
I'm trying to achieve a specific animation behavior using GSAP and ScrollTrigger. I have a list of elements with the data-aos attribute set to various values such as "fade-up" and "fade-down." I want to control the animation duration for each element using the data-speed attribute. const fadedown = gsap.from('[data-aos="fade-up"]', { opacity: 0, y: -50, ease: "power2.inOut", duration: (index, element) => { return element ? element.dataset.speed ?? 1 : 1; }, }); console.log(fadedown.vars.duration); Expected Behavior: fadedown.vars.duration = 1 // or any value in dataset.speed Actual Behavior: fadedown.vars.duration = "(index, element) => element.dataset.speed ?? 1"
-
Hi there, I've checked the documentation for MotionPath and can't see the ability to add a callback function for when the animation has completed?...ideally I'd like this to be called at the end of each loop. Any help would be appreciated. Regards Al
-
Hi there! I am trying to create a scrolled roulette that gets triggered twice, once at the beginning of the main timeline and again later on the other half of the main timeline. I was not able to use several callbacks for the roulette function, so i just called the roulette outside of the main timeline, then the main timeline and somewhere in the half of it i use a callback to the roulette function. however, every time you scroll back and forth and trigger the callback, the function adds to the previous one(s) so you end up having roulettes all over the place. Also by calling the roulette in the callback, the headers come from the top instead of from the bottom. I guess the callback is not the solution I was looking for to trigger the roulette in the middle of the main timeline? but i wasnt able to find another solution so far. If someone could point me in the right direction, I would be very thankful. Also thanks in advance for having the patience to look into this, because it is my first gsap project and I still miss a lot of basic concepts, so I'd be more than happy if you just tell me what I could be missing to keep looking for my self and I'll post the solution as soon as I come up with it.
- 1 reply
-
- scrolltrigger
- callback
-
(and 1 more)
Tagged with:
-
Hi all, I was wondering if someone might be able to offer some help with a scrollTrigger setup I am looking to put together... I would like to be able to know when one of the image blocks on the left comes inline with the pinned element on the right, so that I could do a visual effect on the lined up block, and then remove it and apply to the next block to lineup with the text. Im not entirely sure how to go about his at the moment, my inital thought was to create a whole other scrolltrigger for each block but I doubt that is the way to do this... any help much appreciated... Thanks
- 2 replies
-
- scrolltrigger
- callback
-
(and 2 more)
Tagged with:
-
Hello greensockers, I got a little problem here. So the onComplete function recall every time the toggleStartAnim function, and not just once. So I do not understand why... normally the cycle is finish, any idea... here some of my code : import React, { useEffect, useState } from "react"; import GifFusee from "../assets/gif/fuseeQuiGalere.gif"; import { gsap, MotionPathPlugin, TimelineMax } from "gsap/all"; import WayToMars from "./WayToMars"; import "../assets/stylesheets/Intro.css"; const Intro = () => { let currentTimeScale; const [animStart, setAnimStart] = useState(false); // gsap.registerPlugin(MotionPathPlugin); const takeTime = () => { // currentTimeScale = gsap.globalTimeline.time(); }; const tl = new TimelineMax({ onUpdate: takeTime, yoyo: false, repeatDelay: 1 }); const toggleStartAnim = () => { setAnimStart(!animStart); console.log("toggleStartAnim pop"); }; function test2() { return new Promise(resolve => { tl.set(".intro-container", { autoAlpha: 1 }) .set("#takeoff", { autoAlpha: 1 }) .to("#takeoff", 5, { rotation: 360, ease: "linear" }) .set("#fuseehop", { autoAlpha: 1 }) .set("#fuseeKiDecol", { autoAlpha: 1 }) .to("#fuseeKiDecol", { y: -10, scaleY: -0.1, scaleX: -0.1, duration: 10, onComplete: () => { toggleStartAnim(); resolve(); }, onCompleteParams: {} }); }); } useEffect(() => { test2().then(() => { console.log("test2 done"); }); console.log(animStart); }); useEffect(() => { gsap.globalTimeline.pause(); }, []); return ( <div> {/* Debut intro */} <div className="intro-container"> {/* Debut decollage fusee */} <div id="fuseehop" className="container-fusee"> <img alt="fuseekidecol" id="fuseeKiDecol" className="container-fusee" src={GifFusee} /> </div> {/* Debut rotation terre */} <div className="takeoffplanet"> <div id="takeoff" /> </div> </div> <WayToMars animStart={animStart} changeState={toggleStartAnim} /> </div> ); }; export default Intro; Edit: problem solved in an other way: set the hooks by false like that i'm sure that even if the function is anormally call every x time, i'll set it by true in the child component after really i do not understand why onComplete repeat every time if everybody got an idea why :s const toggleStartAnim = () => { setAnimStart(false); };
- 4 replies
-
- oncomplete
- callback
-
(and 1 more)
Tagged with:
-
Greetings Greensock community I have a "simple" question, which i cannot for the life of me figure out on my own. In Angular, i have several methods in my component, it could be "closeEverything()", normally i call such function with "this.closeEverything()". Now, when i try to call such method in a TweenLite.to onComplete callback, it says undefined function. So far so good. Greensock does not know anything about the Angular scope, and i reckon Angular does now know anything about the Greensock scope. Now from what i have read, i might be able to change the scope Greensock uses in the onCompleteScope property, but i have not been able to make it work. Does anyone have an example, where out-of-scope functions are being called in Tween callbacks? What is it i am missing, i feel like a complete newbie again, trying to implement this otherwise awesome library into my existing Angular application. /Balslev
-
Hey, I just have a question regarding behaviour of stagger methods callback onCompleteAll. onCompleteAll does not fire whenever there are no DOM elements found by a tween - in other words, when there's no target DOM to tween (eg. ".nav-item" does not exist), onCompleteAll does not fire. I wish it would, since I have chain logic in my app. I also do not want to validate whether target elements exist every tween call. I simply resolve a promise on the callback and since stagger does not complete, promise does not resolve. How to deal with that? Thanks
- 4 replies
-
- callback
- oncompleteall
-
(and 1 more)
Tagged with:
-
Hello, I've set up a timeline which has several nested animations within it. On one of the nested animations I'd like to fire an onComplete callback function so that I can change a bit of code. The problem is, the onComplete function triggers as soon as the animation begins, rather than after it. I've attached the code so you can see what I mean: function playScene1() { var tl = new TimelineLite(); tl.to(hand, .6, { x: "-= 100%", y: "+= 0%", repeat: 1, yoyo: true, repeatDelay: 0, ease: Power1.easeInOut }, 0); tl.to(globe, .6, { x: "+= 160%", y: "+= 0%", repeat: 0, yoyo: false, repeatDelay: 0, delay: .6, ease: Power1.easeInOut }, 0); tl.to(hand, .6, { x: "-= 100%", y: "+= 0%", repeat: 1, yoyo: true, repeatDelay: 0, ease: Power1.easeInOut }, 1.2); tl.to(globe, .6, { x: "-= 160%", y: "+= 0%", repeat: 0, yoyo: false, repeatDelay: 0, delay: .6, ease: Power1.easeInOut, onComplete: exampleCallback() }, 1.2); tl.play(); } exampleCallback() is fired as soon as the timeline begins, I'd like to inject my own function after it's finished animating. Sorry if I've missed something very simple here
-
Hi guys! I am a beginner at JavaScript. I created codepen with hover animation. So, when I hover the blue square, the first animation begins. Then, when the first animation ends, the second animation begins. When the mouse leaves, the first animation reverse, but the callback function stills working. I need reverse for the animation inside the callback function when the mouse leaves. How can I do this?
- 3 replies
-
- reverse
- oncomplete
-
(and 1 more)
Tagged with:
-
hi guys it seem the doc missing some option for deep callback setup. i found thoses in the API with vscode debugger,. onComplete:, onCompleteParams:, onCompleteScope: But I was found no information to help me on the events. It would be great to supplement the documentation. thanks
-
(I am trying to use two separate timelines for open and close animations. I have two tests set up which have the same error.) I pass references to timelines to my callback functions. When I pass them as timeline instances, the callback function reports that they are undefined. I can work around it by passing the names of the timelines as strings but that is clumsy. What am I missing? You'll need to have the console open to see the errors. They also manifest themselves after a few toggle actions as timelines don't get reset properly.
- 3 replies
-
- timelinemax
- callback
-
(and 1 more)
Tagged with:
-
how to loop entire tweenmax animations with onComplete callbacks
siva nargana posted a topic in GSAP
how to repeat this kind of callbacks based animation, I cant repeat this entire animation, each tween start based on callback please answer this problem TweenMax.to(".div1",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div2",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div3",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){ TweenMax.to(".div4",0.5,{opacity:1,ease: Linear.easeOut,onComplete: function(){}}); }}); }}); }}); -
Hello fellow tweeners! Hit a brick wall here even though I feel like I've done the hard part. I've been referring to documentation for hours trying to solve this. I'm trying to fire my page loading counter after it fades in, via the tween that does so. Everything is setup & neatly organised/labeled but I'm just butchering the last part lol. The three parts I'm using are marked with lots of asterisks & notes explaining what I'm trying to do. The load counter needs to be nested inside the "onComplete" callback which is already being fired by my tween (console log works)... just not able to get the countdown in. *sigh* Any help would be massively, massively appreciated. Loving the library & community equally! Cheers, Smallio Sorry for the newbie question <3
-
Hi, I would like to create a timeline "A" from which I do some animation and then play another timeline "B" and potentially a timeline "C". I know I can do that by doing A.add(B.play) but as I understand it it merely means B is started at the point in A where I include it. I would like to ultimately be able to fire a callback once A, B and C are all finished without having to worry about whether B plus the elapsed time in A before is start B is longer than the total duration of A. Is there a nice way to create this structure and add a callback once all the timelines end? Best regards, Miry
-
Hi, while developing a responsive GSAP animation, I came across these problems. Please refer to the codepen link for my code. * when resetting the timeline to 0, why aren't the elements properly reset to their initial position? (line 28 in js) * after the first red box has tweened, the timeline will pause until the green box is clicked. However why is the extra delay needed for the second callback to not execute when resizing the browser at that time? (line 38 in js). The only thing I can think of is that a function does not add any duration to the timeline, resulting in multiple subsequent added callbacks to be executed at the exact same time in the timeline (which makes kind of sense..), am I correct?
-
Wait function/tween to complete before being able to start another
Léo Durand posted a topic in GSAP
Hi ! I'm starting with TweenMax and got stucked with an issue. I have a menu which each links can start an animation but they can overlap and make the tween bug. I'd like each function to complete before being able to start another one. I've found that I should use onComplete but I don't get what I am suppose to do then. I've made a JSFiddle to demonstrate the issue I have. On .mouseover, the tween start but if I hover too fast on an other link, it bugs. :/- 13 replies
-
- oncomplete
- animation
-
(and 3 more)
Tagged with:
-
I'm trying to open a new browser window via window.open() after a user has clicked on a button and the button performs an animation first, but I can't simply execute the window.open() in the tweens' callback because the browser no longer believes the call was initiated by a user action... and so it blocks the window as a popup. I've was working on a fix by creating a pop-under and then focus it from the tween callback, but this doesn't feel clean OR stable. I was thinking/hoping there was some sort of option I might be able to pass to the tween that would somehow maintain the integrity of the main thread and allow me to simply open the new window from the callback. Or if somebody had figured out a cleaner workaround than the pop-under method.
-
Hi, I know how to call a function when a timeline animation is complete, but what if I want to call it in the middle of the animation? I want to call the displayContent() after the height=0 animation is called, how should I do that? var $outerBox = $selectedTab.parent('.standard-width'); var animate = new TimelineLite({ paused:true //onComplete:myFunction, //onCompleteParams:["param1"] }); animate.to($outerBox , .4, {height:0,opacity:0,ease:Power2.easeInOut}) .to($outerBox , .4, {height:100,opacity:1,ease:Power1.easeIn}) animate.play(); function displayContent(){ $selectedTab.css({display:'block'});// display selected tab }
- 4 replies
-
- callback
- timelinelite
-
(and 1 more)
Tagged with:
-
Hey, I'm struggling with a callback and clearProps, I've tried few options (found here : https://greensock.com/forums/topic/7299-timelinemax-reverse-callback-problem/) and none of the solutions works, I'm probably missing something or I don't get it. navAnim.reverse(-1).timeScale(1.2).eventCallback("onReverseComplete", navAnim.set(mainNav, {clearProps:"all"})); Doesn't work navAnim.eventCallback("onReverseComplete", navAnim.set(mainNav, {clearProps:"all"})) navAnim.reverse(-1).timeScale(1.2); Doesn't work function removeProps(){ navAnim.set(mainNav, {clearProps:"all"}); } navAnim.eventCallback("onReverseComplete", removeProps()); navAnim.reverse(-1).timeScale(1.2); Doesn't work navAnim.set(mainNav, {clearProps:"all"}); Works but no animation (which is logic), so it's not that clearProps doesn't work but the callBack; navAnim.tweenTo(0, {onComplete: navAnim.set(mainNav, {clearProps:"all"})}); navAnim.reverse(-1).timeScale(1.2); Doesn't work : Uncaught TypeError: navAnim.tweenTo is not a function function removeProps(){ navAnim.set(mainNav, {clearProps:"all"}); } navAnim.tweenTo(0, {onComplete: removeProps()}); navAnim.reverse(-1).timeScale(1.2); Doesn't work : Uncaught TypeError: navAnim.tweenTo is not a function TweenLite.delayedCall(navAnim.time(), navAnim.set(mainNav, {clearProps:"all"})); navAnim.reverse(-1).timeScale(1.2); Doesn't work function removeProps(){ navAnim.set(mainNav, {clearProps:"all"}); } TweenLite.delayedCall(navAnim.time(), removeProps()); navAnim.reverse(-1).timeScale(1.2); Doesn't work Thanks
- 11 replies
-
Hi there, Having a bizarre issue with Callback functions within a repeating timeline & I can't seem to resolve it! I'm fairly new to this, but I can't seem to figure out / research what I'm doing incorrectly. What I'm attempting to achieve is this animate div in let it sit for 2 seconds animate div out move onto div with same class rinse / repeat Like I said I'm fairly novice, but I know I need to use a timeline because I'm planning on stopping the animation at some stage. Any direction would be greatly appreciated Cheers! Matt
- 3 replies
-
- staggerto
- timelinemax
-
(and 1 more)
Tagged with:
-
Hi all, Can you use use onComplete() method within TL max timeline or just in the creation of the TL object i.e, var tl = new TimelineMax({}) ? tl.to($var 3, {bottom:-50}) .to($var1, 1.5, {right:300, ease:Elastic.easeOut, onComplete:complete}); Thanks Nick
- 1 reply
-
- oncomplete
- callback
-
(and 1 more)
Tagged with:
-
I think this library is awesome and works great! Thanks for taking the time to make it So I am building a page that when you click on a button, a bunch of photos will fade and scale down into random positions in a container. I have made three different timelines for each group of photos that will incrementally increase in speed until the last group which will slow back down again. The animation is smooth and works great. My problem is I have created a button that will slide out when that last timeline finishes. When someone clicks on it, I want to be able to just replay the entire animation again. However, it will only play the first timeline over and stop, it won't read my callback within that timeline to move to the next timeline. Not sure why it's doing this since I added the false parameter to suppress events. I'm sure there is a better way with TimelineMax to do what I have done, but this is my first time working with GSAP. Sorry, I won't be able to recreate this in a codepen. Thank you for any help you can provide! Here is my code: var groupOne = $('.group-one .photo_item'), groupTwo = $('.group-two .photo_item'), groupThree = $('.group-three .photo_item'), currentItem = 0, rotateValues = ["-20deg", "20deg", "-10deg", "10deg", "0deg"], widthOffset = 100, heightOffset = 300, containerWidth = $('.photos').width() - widthOffset, containerHeight = $('.photos').height() - heightOffset, tl = new TimelineMax(), tlTwo = new TimelineMax(), tlThree = new TimelineMax(); Draggable.create($('.photo_item'), {type:"x,y", edgeResistance:0.2 }); $('.js-btn').one('click', function(){ beginGroupOne(); }); $('.js-restart-btn').on('click', function() { restartTimeline(); }); function beginGroupOne() { groupOne.each(function(index, element) { tl.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tl.staggerTo(groupOne, 1.25, { force3D: true, scale:1, autoAlpha:1, ease: Expo.easeOut }, .5, 0) .addCallback(beginGroupTwo, "-=.7"); } function beginGroupTwo() { groupTwo.each(function(index, element) { tlTwo.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tlTwo.staggerTo(groupTwo, .75, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .3, 0) .addCallback(beginGroupThree, "-=.5"); } function beginGroupThree() { groupThree.each(function(index, element) { tlThree.set(element, { x: getRandomInt(100, containerWidth), y: getRandomInt(50, containerHeight), rotation: getRandomRotate(), xPercent: -50, yPercent: -50 }) }); tlThree.staggerTo(groupThree, .25, { scale:1, autoAlpha:1, ease: Expo.easeOut }, .1, 0, showRestartBtn); } function showRestartBtn() { $('.js-restart-btn').addClass('is-active'); } function restartTimeline() { tlTwo.pause(0).invalidate(); tlThree.pause(0).invalidate(); tl.restart(false, false); } function getRandomRotate() { return rotateValues[Math.floor(Math.random() * rotateValues.length)]; } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
-
I am unable to get the callback functionality to work while using Meteor framework. I have copied functions straight from the GSAP docs and i still get type error: this._callback is not a function. I have tried everything and looked everywhere for a solution but no dice. Please, any help would be greatly appreciated. If callbacks don't work with Meteor or i am just flat out doing something wrong please let me know. I would add a codepen but i don't believe they have a Meteor framework to use. Template.home.rendered = function(){ TweenMax.staggerTo(".img", 1, {rotation:360, y:100, opacity: 1}, 0.5, myCompleteAll ); function myCompleteAll() { console.log("all tweens complete"); } }
-
Hi everyone, like you can see in the codePen I'm working on something like an app-onboarding. It's one of my first "serious" TweenMax project and I'm still not a pro so maybe you can see some errors somewhere, but my question is another. Like you can see at the end I would restart the entire animation, but I made it with a main timeline and some secondary timelines (some are nested inside the main one, some are external). Like you can see if you try to restart the animation more than one time something is going wrong, and I cannot understand why because in you check the "onComplete" function I set the other timeline to the beginning using "tlLeaving.play(0)". What am I doing wrong? Thanks!