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 313 results

  1. I'm creating a landing page and using GSAP to animate some text according the the user's scroll position. How can I keep the landing page in full view and only start scrolling down the page once the text animation has reached its end?
  2. Hello, I was trying to make a hover function with GSAP with timelinemax. In this, there are lists of elements which on hover will take up an x position and moves back to original position on mouse out. But, here, when I move the cursor in between lists items, the animation doesn't stop, but instead, it waits for the previous one to finish. Traditionally in jQuery, this is achieved through stop() method. What can we do here? and how do we do it? Thanks
  3. greykrav

    Timeline and button issues

    Good evening, I want span one and two to rotate inward causing the cross menu effect however they are just disappearing entirely on click, but I would like this button to remain visible on the right side of the screen while showing the navigation menu , also when the screen is resized to mobile you will notice a black space on top of the image full screen background, how can I fix these issues? any advice appreciate. thank you.
  4. Hi, so I'm currently trying to make the dashed trail rotate around the globe clockwise. However I keep getting an error saying that the tl, or "trail" has not been defined even though it looks like it is. Any help is greatly appreciated, thanks.
  5. Hi guys, So I've only done pretty basic stuff with GSAP at the minute but i've been set the task of building something similar to menu section on this link. http://www.johos.at The scroll timeline thing with changing background / text I just want to know if it's possible to build something similar using Scroll Magic and GSAP? I don't fancy investing a couple of days trying to do it to find out it's not possible.
  6. Hi I'm fairly new to greensock, and I'm loving it. I'm making a 3D timeline(or track) that I'm moving eggs forward and backward when scrolling. I've used perspective to get the '3D' effect. But, I've run into problems, getting the egg to 'fall off'/disappear when it reaches the end. I want to make the whole egg disappear/re-appear when it reaches the end, not portions of it as it moves out of the view-box. Is there some cool way greensock can help me do this? Here's the link to the codepen Any comments would be appreciated.
  7. Nathan Harold

    Grouping Tweens in Timeline

    Greetings, I'm new at GreenSock ( first project ) and as you may guess, I do have some struggles, I want to group the tweens in the timeline, rather than going individually, first two goes at the same time and then the second two and so on... I really try to figure out by myself, I add a minus delay but it's not working properly with ScrollMagic or I can't make it work. Here is my code: let controllerPerspectiveFirst = new ScrollMagic.Controller(); perspectiveTimeline = new TimelineMax(); perspectiveTimeline .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: .72, scaleY: .8, scaleX: .8, ease: Power4.easeOut } ) .from( '#as-perspective-bg--mountain--02', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } ) .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: 0, scaleY: 0, scaleX: 0, ease: Power4.easeOut } ) .to( '#as-perspective-bg--mountain--02', .4, { width: '180vw', scaleY: .6, scaleX: .6, ease: Power4.easeOut } ) .from( '#as-perspective-bg--desert', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } ); Thanks much.
  8. Robert Wildling

    Again: Playing a (staggered) timeline reverse

    Demo: https://codesandbox.io/s/n34pvjxyxj Hi, fellow GSAP'ers! The topic of playing a timeline in reverse keeps troubling me. The Demo above is one, where, within Vue, a parent component calls function on a child component (using $refs). As the console output shows, the functions are indeed called, but the animation is not played in reverse. I do not understand why, because: - the timeline is returned to a var, right? - the staggered animations use `staggerFromTo` , even though I assume that using any of the other two should eventually work, too What am I doing wrong here (again)? Do I misunderstand the idea of having the timeline saved to a variable (here: animateLogo)? Are reverse animation on timeline using a stagger feature not possible? (I doubt that! It's GreenSock!) Thanks you in advance! PS: the actual GSAP-related code parts are kept as short as possible. Please ignore the other stuff, which is just there to wrap the letters... (no, I am still not using SplitText... shame on me!)
  9. Hi, I'm trying to playing around with the features of GSAP, but I can't figure out how to work with timelines, I'm new to all this, any help would be appreciated. What I'm trying to do in my code- Each time the v-shaped silver svg translates away from its initial position and back, the text changes, to a different one, similarly it happens once more. Now it works well in the first iteration, but once the animation restarts, the timing gets disturbed, I just can't figure out what I'm doing wrong here, hopefully I was able to explain the issue, thanks in advance and hope you guys have a great day!
  10. Kalimeromax

    Play animation backwards

    Hey there, this is my first time using GSAP. I'd like to play my animation backwards on hover. The only thing I can't figure out jet is how i can make the animation do that in 1 second. Any ideas? If this is not possible it would be also nice if the animation just jumps back to its origin position on hover. In addition to that: Is it possible to start the animation again on mouseout? Best regards Max
  11. Exhumator

    Dynamically created timeline

    What's up good people I am trying to create my own TimeLine which will show the element (red box) at the random positions for 50 times. Moreover, it should change background color to random between red, green, blue everytime before the box shows up. I am not sure how to do it. Should I define TimeLine, stop it, then add there instructions via "for" loop for 50 times and then run the Timeline via play() method? I think i am doing it wrong, maybe it can be done another way...
  12. otqku

    isActive(); TweenLineMax

    Hi guys first time asking help here 😁, I'm doing some stuff with timelinemax and trying to make animation without make another starting while the first is active, i've discovered the isActive property but even by trying it and reading some other post i didn't get any solution for my method, does anyone can help me thank you if (!tl.isActive()) { tl .add('move') .set(this.$refs.mask, { clearProps: 'all' }) .set(this.$refs.tabs, { clearProps: 'all' }) .set(icons, { clearProps: 'all' }) .set(mask, { x, y, scale, }) .to(this.$refs.picture, 0.8, { x, y, scale, ease: Power4.easeOut, }, 'move') .to(this.$refs.triggers, 0.1, { opacity: 0, ease: Power4.easeOut, }, 'move') .to(mask, 0.3, { autoAlpha: 1, }, 'move+=0.4') .to(tab, 0.3, { backgroundColor: '#F4F0E9', ease: Power4.easeOut, }, 'move+=0.2'); }
  13. 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!
  14. 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!
  15. 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 .
  16. 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.
  17. 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.
  18. 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(); } });
  19. 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!
  20. 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?
  21. 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!
  22. 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!
  23. 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}) ]);
  24. 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.
  25. 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.