Jump to content

Search the Community

Showing results for tags 'timelines'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 22 results

  1. I've been trying to work with GSAP since yesterday and I'm running into some problems and maybe some of you can point me into the right direction (I don't expect a full / complete solution). Let me explain it alongside my code: Snippet from HTML with TailwindCSS: <section id="intro" class="flex flex-col items-center relative bg-white text-black overflow-hidden"> <div id="scrolling-text-1" class="w-full py-8 md:py-12 lg:py-16 xl:py-24 2xl:py-32"> <div class="container grid lg:grid-cols-5 gap-8"> <div class="lg:col-span-2 py-12 sm:py-16 lg:py-20 xl:py-24"> <h5>Lorem Ipsum</h5> <h2 class="mb-12">Lorem ipsum dolor sit amet</h2> </div> <div class="lg:col-span-3 py-12 sm:py-16 lg:py-20 xl:py-24"> <p class="text-lg font-grotesk font-medium my-12"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </div> <div id="scrolling-text-2" class="w-full py-8 md:py-12 lg:py-16 xl:py-24 2xl:py-32"> <div class="container grid lg:grid-cols-5 gap-8"> <div class="lg:col-span-2 py-12 sm:py-16 lg:py-20 xl:py-24"> <h5>Lorem Ipsum</h5> <h2 class="mb-12">Lorem ipsum dolor sit amet</h2> </div> <div class="lg:col-span-3 py-12 sm:py-16 lg:py-20 xl:py-24"> <p class="text-lg font-grotesk font-medium my-12"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </div> </section> JS: import gsap from "gsap/dist/gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger" gsap.registerPlugin(ScrollTrigger); // fade-in/out animation let elem1 = gsap.to('#scrolling-text-1', {opacity:0, paused: true, y:"-50%"}) let elem2 = gsap.to('#scrolling-text-2', {opacity:0, paused: true, y:"0%"}) // pin section ScrollTrigger.create({ trigger: "#intro", start: "top top", end: "bottom top", pin: true, scrub: true, markers: true, animation: elem1 }) I have tried putting elem1 and elem2 into a timeline and executing elem2 after elem1 was finished but elem2 would never appear in the animation it would stay where it originally is. Here's the code from one of my attempts at trying to time elem1 and elem2: JS (attempt at timing elem1 & elem2): let elem1 = gsap.timeline({ paused: true, onComplete: function () { elem2.play(); } }); elem1.to("#scrolling-text-1", { opacity: 0, y: "-50%" }); let elem2 = gsap.timeline({ paused: true, }); elem2.fromTo( "#scrolling-text-2", { opacity: 0, y: "50%" }, { opacity: 1, y: "0%", ease: "none" } ); ScrollTrigger.create({ trigger: "#intro", start: "top top", end: "bottom top", pin: true, scrub: true, markers: true, animation: elem1, }); I tried to run elem2 after the animation of elem1 was done but that didn't seem to work. Can anyone tell me why or push me into the right direction? Thank you for reading and thank you in advance. EDIT: I tried this super simple addition with a timeline but to no avail. let tl = gsap.timeline(); tl.to('#scrolling-text-1', {opacity:0, paused: true, y:"-50%"}); tl.fromTo('#scrolling-text-2', {y:"100%", opacity:0}, {y:"0%", opacity:1}) ScrollTrigger.create({ trigger: "#intro", start: "top top", end: "bottom top", pin: true, scrub: true, markers: true, animation: tl //added timeline })
  2. I want to start by apologizing for the JS. I am learning how to use MVC organization and was testing it out with this project. I know it isn't great but I'm learning 😅. So... my problem here is that while I have my animations working perfectly on first load... I can't figure out how to reset the timeline and scrolltrigger when the window is resized. I understand that certain aspects will automatically recalculate but I need to recalculate certain element positions on the page. I might be going about this completely wrong as I have many examples of similar types of animations that don't have nearly the JS I have. One tricky caveat to my problem is that this is being built is Hubspot using repeaters for the sections, so I can't hard code the 'tl-line' element. I have to dynamically generate the top position and height of that line based on the center of the first and last bullets. In this example there are only 4 sections, but there could be 2 or 10... who knows. Anyway, I am explaining that to help you understand why it looks like a convoluted way to build the trigger elements positioning. Any help is much appreciated. Thanks!
  3. I'm trying to loop through an array of elements (it could be images or paragraphs) and create the same tween for each one of them. But i wanna do it the right way (the efficient, readable and clean way) In this article (https://css-tricks.com/tips-for-writing-animation-code-efficiently/) the author does some loops examples in tip #7 but he doesn't add all the tweens in a single timeline… So, i’m wondering if this is the way to do it? function createTween(element) { return gsap.from(element,{ //animations }) } function createTimeline() { const images = document.querySelectorAll("img"); const tl = gsap.timeline(); [...images].forEach(element => { tl.add(createTween(element)) }) return tl; } createTimeline() thanks in advance
  4. My goal is to get the yellow arrows, after they are done with their initial timeline, to react to mouseenter and mouseleave. When I try to set AddEventListeners nothing works and if I comment them out, only the first timeline runs. I am pretty sure that I need to call the 2nd timeline from a function when the first timeline runs but that's a different thing. When I comment out the 1st timeline the 2nd timeline runs no problem. But if I uncomment everything out nothing works. Am I even approaching this in the right way? I should be able to run a timeline on a mouseEvent yeah? I've taken @carl advice and have tried to make the codepPen as stripped down as I could. Let me know if that's' still too much or not enough. TIA, Diza
  5. According to the Video-scenario, I am forced to make an animation trigger outside the block with these elements( start: '-=100%' ) and the animation falls into the block: div class=”pin-spacer” This is necessary in order to do scrolls.kill() in mobile adaptation and get a landing page with separate blocks. Now this is how it works, you can check it on a screen width less than 1200px. I did not want to make separate pages for the mobile version, since I will have separate pages for different languages, as a result, I will end up with 2 times more pages. This is my first experience with GSAP. Am I using the right way for animation? If so, how can I animate the div "pin-spacer"? How can I add it to the timeline, and change the background-color from transparent to yellow in the last timeline? There are examples of just where are located blocks one after another It would be possible to add my script to the alternative examples of ScrollTrigger. And I also found a bug in ScrollTrigger. I read the article “Most Common ScrollTrigger Mistakes” and fixed the animation continuation bug. .fromTo('#jsScn11', 1, {top:'-100vh'}, {top:'-200vh', ease:Power1.easeInOut}, '-=0.85') .fromTo('#jsScn12', 1, {top:'-100vh'}, {top:'-200vh', ease:Power1.easeInOut}, '-=0.85') But appeared another bug. ScrollTrigger after load page, create inline-style "top: -100vh" on blocks with text and these blocks are superimposed on other text. But "fromTo" should fire later, in the scene #jsScene2 in this timeline: "const tl2 = gsap.timeline({})" Moreover, even if you look with a screen width of less than 1200px (or do a "kill()" on all ScrollTriggers), then "top: -100vh" remains on these text elements anyway! Please, open my example in new tab. This is only mobile version(without adaptive):
  6. Hello, can anyone help me with this error? (I want to preface that I'm a newbie at coding and I only try to adapt from other as much as I can understand...) I have adapted some code from the forum which explained how to use GSAP for different media queries but I cannot seem to make the functionality work... The idea: When page is fullscreen, the menu icon should trigger and animate GSAP timeline on >mouseenter/mouseleave< for selector ".menu-links". ( I used .play(); and .reverse(); ) When page is going devices size screens, mobile/tablet < 733px, the menu icon should trigger and animate GSAP timeline on >click< for selector ".menu-links + #social" ( I used .restart(); and .reverse(); ) ---- the code works right now only when page is loaded in mobile size to begin with, if resized functionality breaks. also vice versa, desktop resized to mobile ---- My question is can: this be done better? Ideal would be to resize page without losing functionality going from big screens to small screens without page reload. ==== ps: if this topic is wrongfully opened please feel free to delete it. Thank you very much, Alex
  7. Hi! I made a timeline attached to a scrolltrigger. When the SVG div appears on the screen, the title is animated, then the subtitle, the icon and each element of the formula, the problem is that the word How Genius barely "appears", the rest of the elements are animated for more than the user has not scrolled to see them, and I would need each element to follow its animation as it scrolls, how can I do? I don't want to use scrub
  8. Hello! I am new to GSAP and I am having a bit of troubles with the following task: I am trying to animate some letters "hanging" , I want them to swing from one side to the other but in a quite natural looking way (like moved from the wind? possible?), and when the animation stops to go back to the initial position (center). What I have achieved is looking very bad (sorry, again I am new to this) Can someone maybe help me? Thanks in advance <3
  9. I'm building an SVG animation and I'm having trouble figuring out how I can incorporate a ScrollTrigger for my panels. My goal is to scale up the panels to their full size as far as the user is scrolled to a position that will allow them to view the animation. I'm not quite understanding how to do so in such a big timeline as this is the first time I'm creating something that is more than 10 lines of code with gsap. Any advice? I apologize in advance if my code is sloppy and not as efficient as it could be. Here's another codepen I made to try to test it out with less animations going on. https://codepen.io/Cptain/pen/wvMbQdO
  10. I'm trying to create a write on text animation that changes with each repeat of the timeline, but even though I have repeatRefresh set to true, (which should invalidate the tweens) it only repeats the same text over and over. I'm using a function in the "text" property of .vars that returns a random item from an array of strings. Am I missing something, and is it possible to achieve the effect I'm trying to with this method?
  11. Hi there! I have a question about how timelines are managed in GSAP 3. While a timeline's animation is running, in the js console I seem to be able to use: gsap.globalTimeline.restart(); If the animation has finished it ignores the restart completely. I can only get it to restart if call it while it's running. The project is a game, this is a particular scene, where I will need to restart the timeline and set a different player (between 1 and 4). Also as we're looking to use VUE.js as a single page application I expect will need a master timeline per scene. It's a bit complicated and a client/work related so I can't post it on codepen. If I can get this working and convince the team to use it then definitely interested in becoming a green sock member. There's nothing as powerful as GSAP for timeline management so definitely need to get this working. It's also worth mentioning during the script I can log the variables for the timelines I've created (tl) when the script runs, but not after it's finished running. Please ignore primarily what the animations are doing - as they're working well (it's a responsive scene of a player jumping over a bar then crying when they lose lol). It's mostly just being able to reset / rewind etc the main timeline and each other individual ones. As I can't seem to get either to work. $(document).ready(function () { var pCurrentPlayerNumber = 1; var currentplayer = ".player" + pCurrentPlayerNumber; var currentplayerwrapper = ".player" + pCurrentPlayerNumber + "-wrapper"; console.log(currentplayer); console.log(currentplayerwrapper); var tlSetStage = gsap.timeline(); tlSetStage.set(currentplayer, {className: "+=visible"}) .set(currentplayerwrapper, {className: "+=centercenter"}) .set(".currentplayername", {className: "+=p" + pCurrentPlayerNumber + "-bg"}) .set(currentplayerwrapper, {transform: "translateZ(200px)"}) .set(".highjump-set.fg", {transform: "translateZ(400px)"}) .set(".highjump-set", {className: "+=centercenter"}) .set(".highjump-set", {xPercent: 300}); var tl = gsap.timeline(); tl.set(currentplayerwrapper, {xPercent: -300, yPercent:-50}) .set(".highjump-set", {xPercent: 300}) .set(currentplayer, {className: "+=stancePlayerRunFast"}) .to(currentplayerwrapper, {xPercent: "+=200", yPercent:-50, duration: 1, delay:1}) .to(".highjump-set", {xPercent: "-=280", yPercent:-50, duration: 1, delay:0},1) .set(currentplayer, {className: "-=stancePlayerRunFast"}) .set(currentplayer, {className: "+=stancePlayerJump"}) .to(currentplayerwrapper, {xPercent: "+=50", rotationY:-180, yPercent:-50, duration: 0.5}) .to(".highjump-set", {xPercent: "-=10", yPercent:-50, duration: 1, delay:0},2) .set(currentplayer, {className: "+=aniPlayerPaused"}) .to(currentplayerwrapper, {xPercent: "+=10", rotationY:-180, yPercent: -80, rotationZ: 50, ease: "power4.Out", duration: 0.5}) .to(".highjump-set", {xPercent: "-=20", yPercent:-50, duration: 1, delay:0},3) .to(".highjump-pole-hoz", {xPercent: "+=70", yPercent:"+=330", duration: 0.5, delay:0},3) .to(".highjump-pole-hoz", {yPercent:"-=190", duration: 0.5, delay:0},3.5) .to(".highjump-pole-hoz", {xPercent: "+=20", yPercent:"+=220", duration: 0.5, delay:0},4) .to(currentplayerwrapper, {xPercent: "+=20", rotationY:-180, yPercent: -20, rotationZ: 100, ease: "power4.Out", duration: 0.5},4) .to(".highjump-set", {xPercent: "-=20", yPercent:-50, duration: 1, delay:0},4) .to(currentplayerwrapper, {xPercent: "+=20", rotationY:-180, duration: 2}) .set(currentplayer, {className: "-=stancePlayerJump"}) .to(currentplayerwrapper, {xPercent: "+=20", rotationY:-180, rotationZ: 0, duration: 0.5}) .set(currentplayer, {className: "-=aniPlayerPaused"}) .set(currentplayer, {className: "+=stancePlayerCry"}) .to(currentplayerwrapper, {rotationY:-180, rotationZ: 0, duration: 2}); console.log(tl); }); If I try to restart them using the below command I get a not defined error. Should I be doing each timeline as a function? tl.restart(); or tlSetStage.restart(); Ideally if I can at least just get the master timeline to reset at this stage it would be a win. Being able to reset individual timelines would also be great. Any help very much appreciated!
  12. Hi community! First of all i want to say that GSAP is awesome! Pleasuring to use it, don't know now how things will be done without it.. So the problem where i had stuck is next: First imagine page, with content, images, svg elements, and they are animated on start by css, let's say - "initial sliding animation". Then we have next: We have two visual blocks. On click the block expands => "Triangle button" become visible. => Content inside it changes and animates => Content under it becomes visible, and we can scroll the page. ("Triangle button" have fixed position) When clicking "Triangle button" we need to show another block, and doesn't matter at what point of page we currently are, block should slide in. Plus we need hover animation. So the questions: Is there a way to play timeline to some point on mouseenter and play back on mouseleave, and if we click on it it expands fully? Now i haven' t any idea how to implement opening of another side when we scrolled already at some point on page. Hope you may help. Thanks a lot!
  13. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. This video walks you through some common problems that professional animators face every day and shows you how GSAP’s TimelineLite tackles these challenges with ease. Although GSAP is very powerful and flexible, the API is beginner-friendly. In no time you will be creating TimelineLite animations that can bend and adapt to the needs of the most demanding clients and art directors. Watch the video and ask yourself, "Can my current animation toolset do this?" Enjoy. Video Highlights Tweens in a TimelineLite naturally play one-after-the-other (the default insertion point is at the end of the timeline). No need to specify or update the delay of each tween every time the slightest timing changes are made. Tweens in a TimelineLite don't need to play in direct sequence; you can overlap them or easily add gaps. Multiple tweens can all start at the same time or slightly staggered. Easily to rearrange the order in which tweens play. Jump to any point of the timeline to finesse a particular animation. No need to watch the whole animation each time. Add labels anywhere in the timeline to mark where other tweens should be added, or use them for navigation. Control the speed of the timeline with timeScale(). Full control over every aspect of playback: play, pause, reverse, resume, jump to any label or time, and much more. Unlike jQuery.animate() or other JS libraries that allow you to chain together multiple animations on a particular object, GSAP’s TimelineLite lets you sequence multiple tweens on multiple objects. It's a radically different and more practical approach that allows for precise synchronization and flexibility. If you are still considering CSS3 animations or transitions for robust animation after watching this video, please watch it again Check out this Pen! If you are wondering what "autoAlpha" refers to in the code above, its a convenience feature of CSSPlugin that intelligently handles "opacity" and "visibility" combined. Recommended reading: Main GSAP JS page Jump Start: GSAP JS Speed comparison Cage matches: CSS3 transitions vs GSAP | jQuery vs GSAP jQuery.animate() with GSAP: get the jquery.gsap.js plugin! 3D Transforms & More CSS3 Goodies Arrive in GSAP JS
  14. Hi! I'm fairly new to React and firsttimer with Greensock aminations. I'm developing a timeline that is animated on the z-axis when the user scrolls through the page. However I have some issues with getting React Transition Group to play well with nested timelines, and animating out of the current progress in the timeline and then animate back on track. I have the following issues: How would I use React Transition Group in components to add/remove elements when scrolled by the element in the timeline. As you can see in Box1 I tried to wrap the component in the Transition component, but then I cannot add a nested timeline to the main timeline in index.js, that is displayed as box2 with animate on scroll. When clicking a box it opens with an animation. how would I make it animate back to small again, when clicking/scrolling. Right now it just jumps back to where it were on the timeline, before it was clicked (try to click box2). I made a simple project. The real project is much larger, and I'm therefore really concerned about optimizing performance and reuse components etc. https://stackblitz.com/edit/react-jap66w?embed=1&file=index.js For reference, this site is doing some of what I'm trying to achieve visually: https://2018.craftedbygc.com/ Thanks in advance
  15. Hey! So I have a timeline loop that should loop infinitely, each new timeline has a negative offset to keep the loop from having a gap at the beginning of each timeline I can achieve the desired effect by adding the same timeline with negative delay multiple times ( lots of timeline.add(anim(), "-=3") ) But for some reason today I can't wrap my brain around how to do this nicely? I have tried various things, negative repeatDelay, onComplete set time() / progress(), but none of them quite work. Something like 2 timelines and the second one loops forever sounds like the right way to do it? Please look at the codepen and all should be made clear, on each 'repeat' of the master timeline there is a gap Thank you in advance ? I'm so sure it's something really simple that I'm overlooking!?!
  16. I am having problem to understand how to bind multiple animations into one variable which is in nest timelines. What I would like to achieve is a looping variables like this codepen: But with multiple animations for one/first variable (box1Timeline) like this, mentioned by @OSUblake Kindly assist, thank you!
  17. I'm new to GSAP but trying out TimelineMax and am having difficulty getting the onComplete function to work properly. Basically I want to trigger another timeline after one is finished playing. Here's the pen. Backstory: I encountered this issue with a more complex snippet inside ScrollMagic. So... wondering if I ran into a bug? Thanks for your help hive!
  18. Can 1 timeline, be added to multiple other timelines? I've added 1 timeline, to two different timelines, and only one instance of the added timeline is firing. If not, what is the best workaround for this scenario? Thank you, and thank you for such an amazing product.
  19. I find it easier sometimes to create two timelines rather then one for complex animations. I know I can make one timeline out of it, but my head is spinning as it is. Wondering if there is a performance hit of any sort using two timeline instead of one. I will have two object moving at once regardless. Thanks
  20. Hi team, this should be an easy one. I have two timelines the main timeline (mainTL) and a separate 'loop' timeline (overTL), which is paused, but not added to the main Timeline. I want to cue overTL to start at a specific point on the main timeline. But I can't find what the syntax is to do this – just to move ahead was forced to use the onComplete callback to play 'overTL'. var overTL = new TimelineMax({paused: true, repeat: -1}); var mainTL = new TimelineMax(); overTL .to('#element', 1, {property:value}) (etc...); // MY FUNCTION FOR PLAYING IT so I can use it from mainTL function playIt(timeline, offset){ timeline.play(offset); } mainTL .set('#neon', {scale: 0.1, transformOrigin: 'center center'}, 'startDust') // CUE overTL at this point .set({}, {onComplete: playIt, onCompleteParams:[overTL, 0]}, 'startDust') .to('#neonfade', 1, {opacity: 0},'startDust+=0.3') (mainTL continues ...); I created a function to do it, but just wondered if there is a more straightforward way to get this working in Greensock? There must be!! Kind of like what I used to do in flash where you would start a movieClip loop at a specific point in your main animation. I would like to be able to completely cue this timeline from the main timeline as needed – pause, reverse, seek etc. But obviosuly don't want to have to write a custom function for each of these if its already part of the plugin. Sorry I'm sure this must be obvious, thanks.
  21. Hi all, I've recently created a long animation by way of manually adding a whole bunch of individual tweens to one timeline along with delays so that everything lines up. I've since realized that nested timelines is the better way to this, especially since 98%of the animation I'm building is extremely sequential, though I should say that there are some places I'd like one timeline to overlap another, but I believe I can simply use an offset (instead of delays) on individual timelines that need a slight shift forward or back in the timeline. So i understand the concept here, but in my implementation I'm not getting sequential animation of the sequence. Instead I see everything run at once in sync. Here's a jsfiddle showing how I'm building the individual and main timelines. It may seem like there's a lot going on, but you can probably disregard most of the first few vars at the top of the fiddle (which are just param data and drawing methods), the timeline specific logic is at the bottom. I should state, that while there are two of the "banners" displayed there, which should animate sequentially, the elements of the banner should also be sequential. Looking at the structure of the json data (arrays split based on where they should live in a nested timeline) you'll see I want the first line (top left corner) to animate then the top box line and the bottom box line together then the text and the last line (bottom right corner) animate. Making a total of 3 timelines for each banner. Again, I know there may be a bit of code here but I've stripped this down as far as I can get without leaving all of the aspects in for everyone to understand what the goal is. Feel free to ask me for me questions for more clarity anywhere, etc.
  22. Hello, Thanks for porting GSAP to JS! I used it for years in AS and was really excited to start using the JS version. I've already deployed it to several projects with great results. I have run into my first road block, however, and I'm hoping someone may be able to assist. I've created a timeline animation that is controlled by a jQuery UI element (draggable). It works great in all browsers except, you guessed it, IE8. In IE8, the timeline will scrub forward with no problem, but will not scrub backwards in the timeline. I've confirmed that the value I am sending to progress() is properly decrementing, and I'm not sure what else I can do. My code is below: tl = new TimelineLite(); // Create a TimelineLite instance // Construct timeline from gallery items $gallery.find('img.nfu-gallery-item').each(function(){ if(!$(this).hasClass('first-item')){ // Do not include first item, fade in not needed tl.to($(this), 1, {opacity: 1, delay: 1}, '-=0.5'); } }); tl.progress(0.5); // Move timeline to 50% tl.pause(); // Pause timeline // Update timeline position var timelinePosition = function(handlePos){ percentLocation = (handlePos / sliderWidth); tl.progress(percentLocation); } // Create jQuery UI draggable element for slider $handle.draggable({axis: 'x', containment: $gallery.find('.nfu-gallery-slider'), create: function(){ $handle.css('left',sliderWidth / 2); // Create UI element at middle of slider }, drag: function(){ timelinePosition(parseInt($handle.css('left'))); // Update timeline position when UI element is dragged } }); Does anyone have any thoughts on why the timeline won't scrub backwards in IE8? Or, perhaps an alternative approach to take for IE8 that will achieve the same effect. Thanks in advance!