Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'timeline'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

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


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. I was hoping somebody might be able to help with a little GSAP issue I'm having 🤞 Essentially, on our site we have a 'Menu and Search' button, that when clicked, will animate in the various parts of the full-screen, takeover menu. As well as this, we also have a separate function which deals with toggling a few classes, etc. This function has been assigned to the onStart callback, and also the onReverseCompleted callback, however it appears that on rare occasions (and I can't seem to create a consistent test case for this) that the onStart is running twice, and therefore breaks our animation. Does anybody have any ideas as to why this may be? I've mocked up a sample CodePen with a general gist of our code, except in a more simple context. Any help would be much appreciated. Thanks!
  2. I want to change color of my background and text again and again parsing my array of colors. I don´t know if I can do that using a variable or changing itemColor value, I was thinking in using an onComplete funcion by I will use this inside React, let itemColor = 0; var tl = gsap.timeline(); tl.to("#bg", { backgroundColor: colors[itemColor].dark, duration: 1, delay: 3 }).to("#h1go", { color: colors[itemColor].light, duration: 1, delay: 0 }); Also I have a Codesandbox link for React https://codesandbox.io/s/gsap-react-text-gsaptimeline-cuk58?file=/src/App.js Thanks in advance
  3. Hello On my first gsap project I'm struggling to work out how I can animate all the elements with the classname of ---l to start at the same time but have a tiny delay and finish a little after one another. I'm using the awesome timeline feature so I can chain events. const tl = gsap.timeline({ paused: true }) tl.to(nav, { duration: 1.1, ease: "power2", x: 0, y: 0, z: 0 }) .from(iLettersList, { duration: 1.1, x: 15, transformOrigin: "left" }, "-=1.2") Each class ---l would need a delay going up by say 0.3s, 0.6s, 0.9s, 1.2s and so on. Sure I could set a {delay:2} on each to() or from() but you wouldn't be able to achieve this kind of effect. https://codepen.io/d--c/pen/PoPZvqd Perhaps this may be too difficult for a first stab but it would be awesome to work out how to do with GSAP. Thanks very much for any help and guidance
  4. So I'm navigating a page using transitions animated with gsap. I don't know if that's the correct approach, but currently my navigation consists of plain js code reacting to click events. Since I'm using react, I'm trying to implement react-router. F.e. to check if the about page is opened, I check whether the current path matches with about and then set the correct position of the container (initially it's transformed outside of the view): aboutTransition = gsap.timeline({onComplete: () => destroyPreviousScroll()}) .set(revealerAbout.DOM.inner, { yPercent: 0 }, 0) .set(revealerAbout.DOM.reverse, { yPercent: 0 }, 0); That's how the transition to about usually looks: aboutTransition = gsap.timeline({ onComplete: () => destroyPreviousScroll(), onReverseComplete: () => destroyPreviousScroll() }) .to(revealerAbout.DOM.inner, duration, { ease: ease, yPercent: 0 }, 0) .to(revealerAbout.DOM.reverse, duration, { ease: ease, yPercent: 0 }, 0) As you can see, usually it includes some ease - but for instantly setting it's position, it doesn't. Using aboutTransition.reverse() for the second example, obviously reverses the animation showing the same thing again but backwards - perfect - but currently for the first example, where I'm instantly setting the position, that's not the case, it just disappears again. To put it short, I need it to appear instantly, as with the first example, but reverse with an animation, as with the second example. How can I achieve this?
  5. I'm trying to achieve the following text hover effect: How do I achieve a hover animation that looks like the one in the video? How do I achieve that kind of space/delay between every single letter? Do I have to split them first or is there an easier approach? In the following codepen you can find my current progress.
  6. Hello When my website launches im creating a timeline and then saving it in an object so later I can control it's playback. Thing is, when I call that timeline again, I would like to pass a parameter that will change the background color of my animation dinamically. I know that the timeline is just an object, and going to _first.vars.background I could change the color, but this is cumbersome. Is there a more direct approach so when I try to play or reverse my timeline I could pass parameters directly and change the burger background color? Thanks in advance :)
  7. I'm using the following code to automatically scroll a div up & down when the user has not been interacting for a while (idle). objListingScrollTween = gsap.timeline({ repeat: -1, repeatDelay: 1, yoyo: true }); objListingScrollTween.add(gsap.to("#sessionListingsHolder", { duration: 5, scrollTo: { y: "max" }, ease: "none"})); This works fine but I have two questions: 1) is there an inbuilt way of getting the value of "max" ? 2) when the user interacts, I pause the timeline. When idle resumes I call resume() on the timeline. But the user may have scrolled manually to a different scroll position in which case there is a jump. Is there an inbuilt way to get the value the timeline needs to seek() to in order to restart the timeline from the correct place? thanks
  8. Hi, I've been trying to re-create the history timeline where I found in: https://www.longines.com/company/history/20th/1939 I tried up to a certain point, after that i'm out of ideas. I've provided the work i've done so far. Up to now i've done the following things, OnDrag the handler, the years dots moves OnClick the year dot, page will scroll to the relevant history topic. Now I'm struggling in following areas, how identify, the handler is in between which two years dots, have to show the years data in the handler on passing each year dot, the content should scroll to relevant topic . If you look at the link you'll understand what i'm saying. And even-though, I manage to move the years dots, at end of it, the handler is going pass the last dot. If you look the reference link. They are correctly managing it. I've been trying this for last couple of weeks now. If you guys help on this that would be great.
  9. I'm trying to create a transition animation between page changes. The component has to be responsive, so, on resize event I have to recreate my timeline, changing some small parameters. Here's my animation code this.timeline = gsap.timeline({ paused: false, onReverseComplete: () => { this.$refs.container.style.transform = '' this.timeline.seek(0).paused(true) } }) this.timeline.from('.mosaic > div', { duration, [scaleProperty]: 0, transformOrigin, ease, stagger }) And when I call the method that plays it, I do this: this.timeline.play().eventCallback('onComplete', () => { this.$refs.container.style.transform = 'rotate(180deg)' next() }) Before window resize, the animation works just fine. This is the initial style that gsap applies to the elements. When I resize, I do: this.timeline.kill() this.timeline.invalidate() this.timeline.clear() (and Im just overkilling is cause I tried other approaches and they didnt work either. Not that this one is working... That's why I'm here) and then I recreate the from animation (second code block). When I do that, the animation does not shows up anymore. Here's the initial style after resizing so, what am I doing wrong? I'm using Vue, here is the full code of my mixin: import { gsap } from 'gsap' import { CustomEase } from 'gsap/CustomEase' export default { data () { return { screen: undefined, timeline: undefined } }, methods: { toggleMosaic (next) { console.log(this.timeline) this.timeline.play().eventCallback('onComplete', () => { this.$refs.container.style.transform = 'rotate(180deg)' next() }) }, createMosaicTween (duration, scaleProperty, transformOrigin, stagger) { const ease = CustomEase.create('custom', 'M0,0 C0,0 0.00803,0.16343 0.02359,0.26241 0.03528,0.33672 0.04691,0.38481 0.07146,0.45433 0.09102,0.50976 0.10899,0.54758 0.14127,0.59573 0.17603,0.64758 0.20631,0.68035 0.25235,0.72417 0.29499,0.76476 0.32677,0.79094 0.37697,0.82011 0.43466,0.85363 0.47691,0.86948 0.54247,0.89277 0.64558,0.9294 0.70952,0.95093 0.81445,0.97552 0.88353,0.99171 1,1 1,1 ') if (!this.timeline) { this.timeline = gsap.timeline({ // converteu pra tween paused: false, onReverseComplete: () => { this.$refs.container.style.transform = '' this.timeline.seek(0).paused(true) this.$root.$emit('transition-dismiss') } }) } else { this.timeline.kill() this.timeline.invalidate() this.timeline.clear() } this.timeline.from('.mosaic > div', { duration, [scaleProperty]: 0, transformOrigin, ease, stagger }) .set('.mosaic > div', { clear: 'transform' }) } }, watch: { $route () { if (this.timeline) this.timeline.reverse() } } } And here's is where I call the component method: mounted () { this.createMosaicTween( 0.3, this.isLandscapeScreen ? 'scaleX' : 'scaleY', this.isLandscapeScreen ? 'center left' : 'center top', 0.07) this.$root.$on('resize', () => { this.createMosaicTween( 0.3, this.isLandscapeScreen ? 'scaleX' : 'scaleY', this.isLandscapeScreen ? 'center left' : 'center top', 0.07) }) }
  10. Hey guys. I am trying to make a morph shape with gsap plugin. The result I want to achieve is: THE GOAL IS: Find svg's with class "morph" and runs timeline animation only for the one's that is in the viewport. THE ISSUE I HAVE: I did some work in the codepen, but the issue is, that every time my window detects the svg class "morph" it start to animate all the shapes/timelines on the website - and not only the ones visible in the viewport. Any ideas how to adjust my codepen? Thank you in advance
  11. Hi guys I really happy with gsap3, and I was waiting for it for very log time 🤩, but I now facing a very weird problem I'm animating some labels with gsap timeline.from to make them appear one by one "a really simple animation" but opacity is animating from 0 -> 0.003 or 0.06 also this is the same with scale from 0 -> 0.08 or something like this i'm using react-js but I don't think this is the problem useEffect(()=>{ labelsRef.current && tl .from(labelsRef.current.getElementsByTagName('mark'),{duration:1,opacity:0,stagger:1},0) .fromTo(labelsRef.current.getElementsByTagName('label'),{scale:0},{duration:0.5,scale:1,stagger:1, ease: "back.out(4)"},0.5) },[labelsRef.current]); when I animate the scale by fromTo everything works perfectly Am I doing anything wrong ???? Thank you very much
  12. Wow, this title must make sense. Hopefully the Codepen helps making this clear. So i have this path that i draw with DrawSVG, and it's "removed" after the whole line is drawn. Now i want the remove-effect happening while the line is still drawing on the other end. Lowering the delay on the remove-effect is not working so i think i'm going about this the wrong way. How should i do this?
  13. What I am supposed to be doing is to throw the bait, and wait for 3 waves and a fish bites. When the fish bites, the bait, must look as if it was dragged down and then the fisherman gets the bait. However, after getting the bait and starting again, the bait is now gone. All that's left is the bait. PS: When throwing the bait, the bait must come from 200px above. It works on my PC however, in codepen, I don't know why it does not go 200px above. mounted() { this.timeline = gsap.timeline() }, methods() { throwBait(e) { let vue = this; this.animation = this.timeline .fromTo( [this.lure, this.bait], 1.3, { css: { left: e.pageX - 25, // 25: Half of lure's width top: e.pageY - 200, scaleY: 0, scaleX: 0, visibility: "hidden" } }, { ease: "elastic.inOut(1, 0.75)", css: { left: e.pageX - 25, // 25: Half of lure's width top: e.pageY, scaleY: 1, scaleX: 1, visibility: "visible" } }, 0 ) .fromTo( this.wave, 2, { y: "-5", width: "0px", height: "0px", border: "1px solid white", opacity: 1 }, { y: "-=5", ease: "Linear.easeNone", width: "50px", height: "10px", border: ".1px solid white", visibility: "visible", repeat: 2, opacity: 0 }, 1 ) .to( this.lure, 1, { y: "-=5px", ease: "Linear.easeNone", yoyo: true, repeat: 6 }, 0 ) .to( this.lure, 1, { y: 20, ease: "power4.out" }, 6 ) .to( this.lure, 0.5, { y: -100, ease: "power4.in", opacity: 0, scale: 0 }, 6.5 ) .then(x => vue.reset()); }, reset() { this.timeline = gsap.timeline(); this.timeline.time(0); }, }
  14. I have read various posts on here, some old, and some more recent, about animations being glitchy in Firefox. I have done my absolute best to obtain as much information as I can prior to posting this, in addition to creating the attached Codepen. For some reason, I cannot get my animation to play smoothly in Firefox. To keep things simple, this is all the information I have (and have learned/tried): Issue only occurs in Firefox on Mac OS (smooth as silk in Firefox on Windows) Not my graphics card as a) it is a top spec 2019 Macbook Pro, and b) my designer has the same issue on his Mac I have tried the rotation fix I have tried force3D I have tried using low res images The more effects that I add, the worse it gets i.e. autoAlpha, Rotation, filter etc... Additional information: I am using GSAP 2.1.3 as haven't had the time to upgrade (after I post this, I will attempt to create the same animation with the latest version in a separate codepen) It does seem as if there is a minor memory leak of some sort in either GSAP or Firefox because my fan goes mad when I have the codepen tab open and on screen I have wondered whether it is to do with the retina display as I had a similar issue with my fan in the past with this plugin that was caused by the retina display Can anyone suggest what may be causing this?
  15. I am having trouble getting this to behave. I have an animation that is occurring inside of an element that is also being animated (or changed). The issue is that when the outer element changes size, all of the values for the inner animation are not adjusting to the new size. In the codepen you can see this by clicking the start button and then either resize the output window or click the enlarge button to enlarge the outer div. How do you solve this. How do you tell the tween to pay attention to the values if that change? Thanks.
  16. I'm doing an animation to show an order summary, I want first expand the width and then the height to create a fancy effect but seems that height is being seated wrong because in the end of the animation it has an extra height not desired. Help! Both tweens works well individually but the problem is when I put them together. Expected: Current:
  17. Hi, Currently I'm in the midst of a project that requires me to show videos sequentially during certain times within certain days of the week. I bumped into this library and it's gorgeous timeline. However whenever I set the duration of a tween (video) on an onStart callback to zero an inconvenient gap of it original duration persists. Is there any way around this problem? Thanks in advance!
  18. Checkout the codepen. If you use the buttons to set timeline progress(), you can go back and forth between 0 and 0.5 no problem, but as soon as you go to 1, you can't get back to 0. I've experimented with other values as well, and everything seems to work until you go to 1 for the first time. After that, when you try and return to 0 it reevaluates to 1. Does this look like a bug, or do I have my logic wrong? Thanks!
  19. I'm pretty sure I was able to set negative progress in gsap2, but it doesn't seem to be working in gsap3. Any thoughts?
  20. Hey is this a bug or a misunderstood feature. I have issue with overwrite. In this demo if we make {overwrite:true} The timeLineId 'action' should override the timeLineId 'pre' only at 3 seconde no ? And if we make {overwrite:false} The timeLine 'pre' will continue in background and make big spike after 'action'. https://codepen.io/djmisterjon/pen/VwwJeJQ would it be possible technically to make override only act when the child timeLine execute has 3 seconds? thanks for help or suggest.
  21. Hi ? I'm using one long timeline for various React states, and the plan is to tween quickly to the correct label when my state changes. The problem is I can't figure out how to set a static duration (say, 0.5) for the tween in GSAP 3. Is there a way to do this? Also, I'd like the tween to ignore pauses I've added between each state (w/ tl.addPause()). Is this the expected behavior? Thanks!
  22. Hello, I need to set my react state inside my timeline after first animation ends and then continue with animations: const tl = gsap.timeline(); tl.to(pTitle, 1.5, { x: -550 }).setNewState after previous animation.to(pTitle,1.5,{x:150}) so far I could achive it with that: tl.to(pTitle, 1.5, { x: -550 }).add( setTimeout(() => { //setNewState }, 1500) ).to(pTitle, 1.5, { x: "-4%" }); is this proper way of implementing this? Or is there "smoother" way of achieving it like with delayedCall() - which is not available in timeline
  23. Hi there! I've been hassling with this issue for a few days now and I can't come to an understanding of why this won't work. So as you see there is a menu that slides out on click of a button and slides back in when it's clicked again. Now I'd like to give the right pane of the menu a different background color which appears just after the menu slides out. When the menu slides back in, the right pane should reset and when the menu is slided out again, appear when the slide-out animation is complete. You get the idea I hope. I've tried putting the two tweens in a timeline together, but then the sliding animation of the menu won't work anymore. Am I just totally missing a point or am I making things difficult for myself? I would love to hear your ideas! ~ David
  24. What best way to make complexe text callBack (story) inside a time line ? currently this not work fine ! plz see : function txt0() { line:6 https://codepen.io/djmisterjon/pen/BaarKLL if you look console, it should show 0,1,2 ! but it seem buggy here. Are you able to show some versions on how to use that kind of stuff correctly ? I need a clean way because it a very complex system events managers.
  25. Hi guys, I'm trying to give a color for each path. my issues is the color of the first path is applied to all the rest! thanks very much. site to see the animation: www.mwmtest.com/bio JS: // Signs Anim // var tlBio = new TimelineMax({ repeat: -1, delay: 3, repeatDelay: 0.2, yoyo: true }), earth = document.getElementById('earth'); tlBio.to(earth, 2, { morphSVG: '#fire' }, '+=1').to(earth, 2, { morphSVG: '#water' }, '+=1').to(earth, 2, { morphSVG: '#space' }, '+=1').to(earth, 2, { morphSVG: '#wind' }, '+=1'); CSS: #earth { fill: pink !important; } #fire { fill: yellow !important; visibility: hidden; } #water { fill: blue !important; visibility: hidden; } #wind { fill: green !important; visibility: hidden; } #space { fill: red !important; visibility: hidden; }
×