Search the Community

Showing results for tags 'timeline'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 301 results

  1. I have a group of animation that would be executed one after the other which is perfect to do with timeline and its labels but I also want to add on a single repeating animation that would be playing throughout this whole timeline and would end when the timeline ends. When I added this stand alone animation inside the timeline in the first label, everything else waited for it to finish playing. It still happened even if I put it at the top before the chain animation with labels and without using any labels to calculate the timing. Of course, I can choose not to use labels at all and calculate the time needs to be added in between all the animations manually but that would defeat the purpose of using the timeline in the first place. //want to repeat this sprite throughout the whole timeline timeline.to('.repeating-animation', 1.2, { repeat: 4, //anyway to calculate this automatically so that it stops when the timeline ends instead of giving a fixed value? backgroundPosition: "-10px 0", rotation: 0.01, ease: SteppedEase.config(5) }, "0") //starts at the beginning //followed by chained animation //but everything down below waits for the reapting animation above to be finished before executing .addLabel("label1") .from('.sample', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label1+=0.5") .addLabel("label2") .from('.sample2', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label2+=0.5") .addLabel("label3") .from('.sample3', 1, { autoAlpha: 0, ease: Sine.easeOut }, "label3+=0.5") //and so on I'm wondering - if there is a cleaner proper way to play this repeating animation throughout the timeline. - if there is a way to make the number of times being repeated to be dynamic to total length of the timeline? So, it stops when the timeline ends? Thanks in advance!
  2. senza12

    Issue with TimeLine Progress

    Hi all, First of all, thank you for the lovely community and the support given. I have spend many hours going over older topics to figure things out in the past and its been a massive help. I am working on a new project where I want to trigger animations based on a scroll position. I know this has been done many times before and after doing some research I decided that I do not want to use a plugin (like Scrollmagic for example) for performance reasons. On one of the posts here I found out that there is a newish API within JavaScript that can handle my needs called IntersectionObserver, I am using a library to make sure that I have a wide browser support for this technology (https://github.com/russellgoldenberg/scrollama). If you would look at my Codepen, you will notice that I am trying to trigger an animation on the second element based on the scroll position. I am using .progress(); to do so, where I call in a value between 0-1 based on the scroll position (taken from the Scrollama library). When you scroll down, you will notice that the box on the left moves position (as intended). The problem I am having though, is when you scroll up it does not move back. I am assuming that when using the .progress(); function, the timeline will be animated to whatever position is being fed into this? Unfortunately I can not get this to work. I have been searching on the internet for hours now and I just can't seem to find the issue. Hopefully this explains my problem clear enough, thank you in advance for any help!
  3. Stagnax

    Invoking function on scrolling

    Hi, I was looking for animation on scrolling and i came across this So I played with it a little. I used scrollmagic to pin the layout during the duratoin of the box animation. So now i want to create similar animation timelines, with few changes. How do i put an individual timeline into a function and call it on scroll. Ive tried this syntax, but it doesnt seem to work : jQuery('.Screen').each(function () { var currentScreen = this; new ScrollMagic.Scene({ triggerElement: currentScreen, duration: 2000, offset: iScreenSize_H }) .on('start', function () { console.log(this.triggerElement().id); }).addTo(controller); }); Thank you .
  4. I'd like to see if there's a way to load GSAP through JavaScript and then create a timeline after it's loaded and ready. I tried to use fetch + then to achieve this, but I think there's something I'm doing wrong here. fetch('https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js') .then(function() { var tl = new TimelineMax({repeat: -1}); tl.to("#square", 1, {x: 300}) .to("#square", 1, {x: 0}) ; }); Th error I'm receiving: Uncaught (in promise) ReferenceError: TimelineMax is not defined I'm not sure if this is just a JavaScript error or an error with how GSAP needs to be loaded.
  5. rymatt94

    Red Progress Slider

    Hi all, I'm trying to recreate a feature of this timeline slider. However, my timeline is configured differently, so I'm having difficulty translating the js over. Basically, I want my slider to change from white to red as the timeline slider progresses. Here's my current setup: https://jsfiddle.net/rymatt94/w9tf2bzw/40/ Apologies if this is overly simplistic - I'm new to javascript/jQuery and GSAP! Thanks in advance.
  6. Maximilianwte

    Play One Step of Timeline on Mouse Scroll

    Hey, I am desperately searching for a way to play one step of my timeline when the a mouse scroll gets started. All methods that I have found trigger the events multiple times on scroll and gsap gets really confused. Is there a convient way to build something like that with greensock? What I want to build is a animation triggered webapp like these: https://theshift.tokyo/ http://www.contiducco.it/index.php?route=common/home My Code at the moment: $(window).bind("mousewheel DOMMouseScroll", function(event) { var docTimeline = new TimelineLite({ paused: true }); docTimeline.add(TweenLite.to(".lightLogo", 1, { y: "200%" })); docTimeline.add(TweenLite.to(".text", 1, { x: "0%" })); // Events when scrolled down. if ( event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0 ) { docTimeline.play(); } else { docTimeline.reverse(); } });
  7. Hi Everyone! I am working on an audio player that is controlled by a draggable element using GSAP. The audio and timeline animation work fine if the user pauses the clip before dragging the element, but if the user tries to drag the element while the audio is still playing the timeline breaks and returns a timeline.time() = 0 no matter what I try to pass into it. Any help would be greatly appreciated! Thanks!
  8. I want to extend the time of the timeline exactly in the current item, but without pausing, just extend the total duration. When I use myTimeline.totalDuration ( myTimeline.totalDuration () + 10 ) not works. The timeline continues with the current duration... My example code: trace(myTimeline.totalDuration()); //20 myTimeline.totalDuration( myTimeline.totalDuration() + 10 ); trace(myTimeline.totalDuration()); //20 //the final result should be 30... not?
  9. Hi community! I'm first time playing around with GSAP and I love it. I tried to build a little demo where a bee is flying. The clouds are moving but If I use no timeline the delayed clouds (cloud 3 & 4) are moving too fast. Any Idea how I can fix that? I tried to use a timeline but it is not working. I think because the first element (#bee) has an infinite repeat (-1) so its not starting the second tween. Is there a way to start the tweens in a timeline manually? I didnt understand the docs and couldn't find it. Thank you!
  10. Problem I'm noticing some very strange behavior when I'm updating a timeline's children tween durations. This is problematic for instances where I need to set the duration of the tween after initialization. e.g. an audio clip needs to download before knowing what the desired duration is. Observations The codepen demonstrates this. I construct 10 tweens at 0.2 duration each to a timeline (2s total). When I update each of the tweens' durations to 0.4, several unexpected things are observed: 1. Parent timeline only goes to 2.2 2. The tweens become "choppy" with overlap. It appears that only the last tween expands the timeline, but an interval of 0.2 is still placed between each tween. How can I correct this after updating the duration? Thanks!
  11. I've created an animated landing page for my portfolio using GSAP and ScrollMagic.js, but it's pretty resource intensive and I know my code isn't the most efficient. How can I modify the code to create a smoother and more robust animation? And how can my JavaScript be condensed and more efficiently written to avoid repetition? function pageScroll(e) { var clicked = e.currentTarget.id; if (clicked == "navWelcome") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"header"}, delay:0.3}); }else if (clicked == "arrow") { TweenMax.to(window, 3.5, {scrollTo:{y:"#aboutMeFull"}}); }else if (clicked == "navAbout") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#aboutMeFull"}, delay:0.3}); }else if (clicked == "navServices") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#servicesConBg"}, delay:0.4}); }else if (clicked == "navPortfolio") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}, delay:0.3}); }else if (clicked == "portfolioBut") { TweenMax.to(window, 0.8, {scrollTo:{y:"#portfolio"}}); }else if (clicked == "navContact") { TweenMax.to($('#mainNav'), 0.4, {x:windowWidth}); TweenMax.to(window, 0.8, {scrollTo:{y:"#contact"}, delay:0.3}); } } for (var i=0; i<navBut.length; i++) { navBut[i].addEventListener('click', pageScroll, false); } for (var i=0; i<navItem.length; i++) { navItem[i].addEventListener('click', pageScroll, false); } document.querySelector('#arrow').addEventListener('click', pageScroll, false); //Landing Page $(function() { var xTo = 1.15*window.innerWidth; var yTo = 0.5*window.innerHeight; var rocketTween = new TimelineMax().add([ TweenMax.from("#parallaxContainer #bg", 1, {backgroundPosition:"0 100%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsSmall", 1, {backgroundPosition:"0 12%", ease: Linear.easeNone}), TweenMax.from("#parallaxContainer #starsLarge", 1, {backgroundPosition:"0 6%", ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #rocket", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #cloudsFront", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #cloudsBack", 1, {y:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #comet", 0.5, {x:-xTo, y:yTo, delay:0.5, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #logo", 0.8, {opacity:0, ease: Linear.easeNone}), TweenMax.to("#parallaxContainer #arrow", 0.07, {opacity:0}) ]);
  12. Hey guys Sorry for the very basic question, but i'm running an animation linked in the codepen (very simple state at the moment) and there's 2 parts that i'd like to loop while other animations in the timeline play, to be stopped at a later point. For example, if I added .to("#anim-loadingdot", 1, {repeat:-1, yoyo:true, bezier:{values:MorphSVGPlugin.pathDataToBezier("#anim-loadingpath", {align:"#anim-loadingdot"}), type:"cubic"},ease:Linear.easeNone}) the timeline would wait infinitely for it to finish before continuing. Is it possible to set this to run "infinitely" at a certain point, and then come back to stop it later? Thanks in advance and sorry for the basic question.
  13. Hi! I have two videos on the timeline: After some seconds of the playing of the second video, it calls dispose() of the first one. But the dispose free the memory from the first one so fast that the play of the second video gives a small "bottleneck" in playback at the time of the dispose(). A "bottleneck" of half a second, but ideally it would not "bottleneck" anything and the playback would be 100% fluid. Is there a way of the dispose() free the memory more slowly? Thanks a lot.
  14. Mheetu

    Moving Between Labels On Click

    I've recently found myself wanting to animate SVGs for a few different projects and realized I realized that I've not done it before. In looking to find a good method of handling different sorts of animations, I found GreenSock and have gone over the docs and some of the learning materials, but I seem to be misunderstanding some basic concept... I saw the face example on the MorphSVG plugin and decided to do my own take on it... I've gotten some of it working, but I'd appreciate it if someone could take a look at my CodePen and tell me what I'm doing wrong when trying to animate between a Smile, Neutral, and Frown face. Thanks
  15. Hi, Is it possible to create a timeline that after playing for the first time, when it repeats it starts from a different point in the timeline? In the example below (CodePen included) I'd like the timeline to play through once from the start, and then after this when the repeat kicks in I'd like it to start from the "start" label. It will basically remove the initial fading in off all the elements after the first play. var tl1 = new TimelineMax({repeat: -1}); tl1 .to(".box", 2, {opacity: 1}) .add("start") // would like animation to start from here when repeating .to("#box-1", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-2", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-3", 1, {scale: 0, ease:Power0.easeNone}) .to("#box-4", 1, {scale: 0, ease:Power0.easeNone}) Many thanks
  16. Hello friends. I ran into a strange issue: if you .addPause() to a timeline that has doesn't have any tweens inside it (only callbacks), the timeline isn't paused. See the example pen. Note that when the pen runs, both 'before pause' and 'after pause' are logged. If you uncomment either of the tweens, addPause works correctly. I know this looks a little silly, but I ran into this issue in production. I'm working on a state transition system where states have an 'enter' and an 'exit' method. The states also have a preload function, which returns a promise. In pseudo code, the transition logic looks like this: const tl = new TimelineLite(); if (currentState) { tl.add(currentState.exit()); tl.add(() => { scene.remove(currentState); }); } if (nextState) { tl.addPause(); tl.add(() => { scene.add(nextState); }); tl.add(nextState.enter()); nextState.preload().then(() => { tl.resume(); // or removePause }); } The goal is to begin preload and exit simultaneously. Then when both are done, the next state is added to the scene and it's enter animation is played. The 'enter' and 'exit' methods return a no-op function (if there is no animation for that state), or a tween (if there is an animation for that state). The issue I have is that if there is no current state (or the current state has no exit animation), AND the next state doesn't have an enter animation, the 'scene.add(nextState);' callback is triggered before the preload is complete. I can work around this in code, but I would expect the 'addPause' to work even without any tweens. Or maybe this is too much of an edge case? EDIT: Actually, it looks like both callbacks in the pen are also triggered if only the 1st tween is uncommented. But if the 2nd (or both) tweens are uncommented, the pause works as expected.
  17. Hello GSAP community, I dug through the forums and tried to find if someone has already had this problem but I wasn't able to find the solution, so I thought I'd ask the community. I'm currently trying to figure out how to pause an element's animation at around 10 seconds into the the animation. I've tried using pause(), kill(), and have added a new function trying to pause the timeline, but I have had no luck. The scene in question is `scene4` in the codepen. Any ideas? Thank you very much for your time, it's greatly appreciated!
  18. I have a timeline animation with an onComplete function. In the timeline I have several overlap tweens, ie. load.to('#preloadLogo', 3,{autoAlpha: 1},"-=2") The "-=2" overlaps are causing the onComplete function to fire with a delay. In the codepen example, it takes several seconds for the heading to load. When the overlaps are removed, my onComplete function fires immediately (which is what I want). How can I make the onComplete fire right away, and still keep my timeline overlaps in tact?
  19. Stagnax

    Animation Timeline

    I want the car to move after the bicycle has reached its end. (How to trigger a 2nd scene only after the 1st scene is completed ) Thank you in advance
  20. emilychews

    Cannot Reverse a Played Timeline

    Hi I have a mouseenter / mouseleave effect on a button. I'm using this method to prevent a CSS / JS conflict on the button which is also part of a pageload animation. I can get the timeline to play on mouseenter, but I can't seem to get it to reverse on mouseleave? Codepen link with HTML and CSS is included, and below is the JS/GSAP code for quick reference // GSAP / JS // --- button fade in function, invoked in subsequent timeline function buttonFadeIn() { var tl = new TimelineMax(); tl .to(".btn", 1, {opacity: 1, ease:Power3.easeIn}) .to(".btn a", 1.8, {opacity: 1}) return tl } // --- invokes initial fade in on pageload function homeTitles() { var tl = new TimelineMax(); tl .add(buttonFadeIn()); } homeTitles(); // --- mouseenter / mouseleave on 'Learn More' button var learnMore = document.getElementsByClassName("btn")[0]; // --- function that is invoked on mouseenter/ mouseleave function learnMoreHover () { var tl = new TimelineMax(); tl .to(learnMore, .3, {opacity: .3}) return tl; } if (learnMore) { learnMore.addEventListener("mouseenter", function(){ learnMoreHover().play() }, false); } if (learnMore) { learnMore.addEventListener("mouseleave", function(){ learnMoreHover().reverse() }, false); }
  21. SimonDucak

    MorphSVG animation

    Hi, I tried create similar animation in right top which you can see in the picture from this website ( https://waaark.com/ ). In CodePen is my animation. Their animation start from bottom to top but my from all sides to middle. Thank you for your advice.
  22. Hello, Is there a way to remove timeline nesting? I have timelines which may play separately, but when they are nested to some combined effect, they dont .play anymore. One way I found to do this is to create another nesting, but this is too much imo.
  23. MarioLapone

    Add TweenMax as variable to a Timeline

    I have a "simple" question (I think that it doesn't need a codePen sample). We have a variable like this: var tx = "TweenMax.to('#element',2,{textShadow:'10px 10px 10px rgba(255, 255, 255, 0.5)'})"; I take it from an xml file. Can I do something like this? tml.add(tx, s); Where "tml" is a timeline and "s" the time in seconds. With this sintax it doesn't work (no error and nothing happens). Is there some other way to do this? Thank you very much for your patience. Mario
  24. pauljohnknight

    forEach Trigger on Timeline Function

    Hi, I have a text slider than has two alternate text slides animating in and out within a container, and this code is animated with GSAP (Codepen link provided). I want it to trigger with a forEach function, because I have a couple of instances of this same effect on a page. So I set up a basic forEach function that will trigger the animation as it scrolls into view, but when I use this method to invoke the sliders() animation function, I get all sorts of unexpected behaviour. In my if/else statement when i just do a basic test line (i.e. item.style.background = "green";) it works, but when add put the sliders() function call in it all goes a bit haywire. Does anyone know what is happening? Or what the best solution would be? P.S if you want to see the intended behaviour of the animation, if you comment out the forEach section and re-comment in the slider() function call you'll see what the animation is meant to look like. P.P.S Any help would be hugely appreciated. function sliders () { var timerbar = document.querySelectorAll(".timerbar"); var tl1 = new TimelineMax({repeat: -1}); tl1 .from(timerbar, 2, {scaleX: 0, ease:Power0.easeNone}) .staggerTo(".js-stagger-1", .5, {y: -30, opacity: 0}, .2) .staggerTo(".js-stagger-2", .5, {y:0, opacity: 1}, .2) .to(timerbar, 0, {scaleX: 0}) .to(timerbar, 2, {scaleX: 1, ease:Power0.easeNone}) .staggerTo(".js-stagger-2", .5, {y: -30, opacity: 0}, .2) .to(".js-stagger-1", 0, {y:30, opacity: 0}) .staggerTo(".js-stagger-1", .5, {y:0, opacity: 1}, .2); } // sliders(); // FOREACH TRIGGER ON TEXT SLIDES var triggerBox = document.querySelectorAll('.one-col.js-scroll-trigger'); function scrollTrigger() { triggerBox.forEach(function(item){ var boxPosition = item.getBoundingClientRect().top; var boxPositionPercent = (boxPosition / window.innerHeight) * 100; if (boxPositionPercent <= 100) { // 100% equals bottom of viewport sliders(); } else { // somehow kill the function } }); } window.addEventListener("scroll", scrollTrigger);
  25. cfx

    GSDevTools Playback Erratic

    Guys, Although I've worked with GS before, GSDevTools is new to me. I'm loving it but finding I get varying results in the playback. I have some code which I'll list below and it includes a draw function then a splitText function then a fade function which are on a masterTL. I hit play and all's well but if I hit play to watch the animation again the fade gets quicker and seems to move up the timescale and if I hit play again it gets quicker still and then disappears. I've tried including TL functions to reset vars but it doesn't make any difference. Obviously the code doesn't change. <CODE> /*Draw Function - makes .svg with class="badge" visible then draws it, then fades the container div #splash and all works fine*/ function drawBadge (){ TweenLite.set("#coreBadge", {visibility:"visible"}); var tl = new TimelineLite(); tl.from(".badge", 0.6, { drawSVG: 0, delay: 0.2 }); tl.to("#splash", 0.6, {autoAlpha: 0, display:"none"}); return tl; } /*Split Text function - variable received to function as console confirms, makes <p> visible then performs splitText on <p> and works fine*/ function runText (textLine) { TweenLite.set(textLine, {visibility:"visible"}); var mySplitText = new SplitText(textLine, { type: "chars" }), tl = new TimelineLite(); console.log("done split ",textLine); tl.staggerFrom(mySplitText.chars, 0.01, { opacity: 0 }, 0.04); return tl; } /* Fade Function - variable received to function as console confirms, then tweens a simple repeating fade on same <p> as Split Text function and works fine first time*/ function hudFadeEffect (hudLine) { TweenMax.to(hudLine, 0.8, {delay: 0.8, alpha: 0, repeatDelay: 0.1, repeat: -1, yoyo: true}); console.log("fade effect",hudLine); return hudLine; } /*Timeline*/ var masterTL = new TimelineMax(); masterTL.add(drawBadge(), 0) .call(runText, ["#hudGenius"], 1) .call(hudFadeEffect, ["#hudGenius"], 2) What am I doing wrong? I know you'd probably appreciate a pen but mine's private - I can send the url to GS superfabheroes if you want via email. Buzz