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. Hi, i have found a function that creates a random shake effect. The effect is now endless but i want to use this function in my timeline for a x amount of seconds. See codepen for the shake effect, below is kinda how i want it to work. function Tween(){ var T = TweenLite.to(".circle",0.02,{x:R(-10,10),y:R(-10,10),scale:R(1.1,0.9),rotation:R(-10,10),ease:Sine.easeInOut,onComplete:Tween}) }; function R(max,min){ return Math.random()*(max-min)+min }; var tl = new TimelineLite(); tl.add(Tween) .to('.circle', 1, {scale:50, y: -30}, "start+=0.5") .from('.circle-2', 0.3, {opacity: 0.0, scale:10}, "start+=0.6") .to('.circle-2', 0.6, {x:100, ease: Elastic.easeOut}, "start+=1.25") .from('.blokker', 0.6, {opacity: 0.0, x:15, ease: Elastic.easeOut}, "start+=1.4"); So this adds the shake effect to my .circle class but obviously this keep going and going. Just like the rest of my timeline i want this effect to last for a x time and then move on with playing the rest of the timeline.
  2. Guest

    ScrollMagic - TweenMax vs Timeline

    I'm new to both Greensock and ScrollMagic and I'm running up against a wall. I'm trying to understand how to tween/animate some aspects of my site ie., transitions between frames but still maintain some of the control by having items react when the user scrolls. Right now my project only reacts the scroll movement but I'd like to be able to trigger section to tween/animate as it gives a nicer/non choppy display. Any and all feedback/help would be greatly welcomed so that I can resolve this dilemma. Thank You
  3. Hello Peoples, I'm trying to create this Split-flap Display style animation using GSAP. I've got two images, each split into a grid and upon clicking, all the squares has to flip, revealing the other side. I'm trying to make a nested timeline and to stagger the whole thing. Here my code: //Splitting image into a grid var Split = function(tar) { this.$t = $(tar); this.gridX = 6; this.gridY = 4; this.w = this.$t.width(); this.h = this.$t.height(); this.img = $("img", this.$t).attr("src"); this.delay = 0.05; this.create = function() { $("div", this.$t).remove(); for (y = 0; y < this.gridY; y++) { for (x = 0; x < this.gridX; x++) { var width = this.w / this.gridX * 101 / this.w + "%", height = this.h / this.gridY * 101 / this.h + "%", top = this.h / this.gridY * y * 100 / this.h + "%", left = this.w / this.gridX * x * 100 / this.w + "%", bgPosX = -(this.w / this.gridX * x) + "px", bgPosY = -(this.h / this.gridY * y) + "px"; $("<div />") .css({ top: top, left: left, width: width, height: height, backgroundImage: "url(" + this.img + ")", backgroundPosition: bgPosX + " " + bgPosY, backgroundSize: this.w + "px", }) .addClass("segments") .appendTo(this.$t); } } }; this.create(); this.$t .on("click", function() { $(this).toggleClass("active"); }) .click(); }; $('.split').each(function() { var split = new Split(this); split.create(); }); //Flipping animation TweenMax.set(".segments",{transformPerspective:600}); $('.split').on('click',function() { var t1 = new TimelineMax(); t1.add([TweenMax.staggerTo($(".top").find(".segments"),1.0,{rotationY:"+=180",ease: Power2.easeIn},0.1), TweenMax.set(".top",{opacity:0}), TweenMax.set(".bottom",{opacity:1}), TweenMax.staggerTo($(".bottom").find(".segments"),1.0,{rotationY:"+=180",ease: Power2.easeOut},0.1)],0,"start",0 ); }) Can anyone help me on this?
  4. Hi All, I've created a fish eye scaling effect but it uses lots of individual tweens, it seems VERY redundant. I tried creating a timeline but it didn't work at all Would a timeline approach for this work, given I need the instance of the object being hovered?
  5. Hi there, im new to the GSAP and first of all i want to thank the devs for their great work! Sadly i seem to have a problem bringing together the CSSRulePlugin with a TimeLine-Object; actually i can guess the answer: these both are not supposed to work together, right? Thats what i have for example (for the principle i hope it is ok posting without codepen): var tl = new TimelineLite(); var blueStripePseudo = CSSRulePlugin.getRule('#cropContainer:after'), backWhitePseudo = CSSRulePlugin.getRule("#bckgrImgPartialContainer:after"); tl.from(blueStripePseudo, 1, {cssRule: {transform: "scaleY(5)"}}) from(backWhitePseudo, 2, { cssRule: { width: "100%", ease:Sine.easeInOut}}); If it is possible in general and im doing just something wrong i'd grateful if somebody could enlighten me otherwise i would appreciate if somebody could just confirm ^^ Thank you for your time! regards
  6. Just getting started with GSAP, and have been looking for a clear explanation of how long the time equates to when using in conjunction with scrollmagic. I have 5 images that do stuff, and it works well: .from(coaster, 6, {ease: Expo.easeOut,rotationX:90,transformOrigin:'0% 100%'}) .from(wheely, 5, {ease: Expo.easeOut,rotationX:90,transformOrigin:'0% 100%'}, '-=5') .from(dsgn_helter, 5, {ease: Expo.easeOut,rotationX:90,transformOrigin:'0% 100%'}, '-=5') .from(dsgn_trees, 5, {ease: Expo.easeOut,rotationX:90,transformOrigin:'0% 100%'}, '-=5') .from(dsgn_merrygoround, 5, {ease: Expo.easeOut,rotationX:90,transformOrigin:'0% 100%'}, '-=5') However if I change the first line to .from(coaster, 20, {ease: Expo.easeOut,rotationX:90,transformOrigin:'0% 100%'}) Or even a small value like 1, it makes no difference. I am assuming it's ignored if using SM with a duration? Many thanks in advance.
  7. Hey guys, I want to pause the timeline when it's completed. tl = new TimelineMax({repeat: -1, paused: true}); tl .to(dummy, 0.5, {x: '+=60', ease:Power3.easeOut}, 0.5) .addPause() .to(dummy, 0.5, {x: '-=60', ease:Power3.easeOut}, 1.5) .addPause(); The first addPause() works, the one at the end doesn't effect the timeline at all. The timeline is paused on load, a click on a button starts it. It pauses on the first addPause, a buttons starts it again but it doesn't pause on the last addPause. I hope it's somehow clear what I'm trying to achieve I'm thankful for any help.
  8. Hi, I am trying to create a banner with timeline animation and a background html5 video. I am trying to keep the video in sync with the timeline, which is also working pretty well in the codepen example. That being unless you switch to another tab or scroll down on a page so the banner is out of sight, then it seems the animation is pause while the video continues to play and therefore gets out of sync. So what is the best practice here? to always keep them in sync? Can I listen for when the timeline is in pause mode and then pause the video, or can the timeline pauses be deactivated?... or a 3rd option Perhaps someone has an example on this or maybe an earlier topic which I couldn't find?! Thanks! /Alex
  9. I am new to GSAP and am putting together a 2.5D rotating coin using GSAP scaleX and x. The coin is meant to a) "rotate" in the tails side, then rotate out the tails side, then c) rotate in the heads side, then d) rotate out the heads side, and then the loop of the sequence begins the rotate in of the tails side again. I have gotten the animation as far as c), but when I try to use scaleX to start d), something happens to the timeline and the "heads" side of the coin appears from the very start of the animation. I have included a codepen here: https://codepen.io/bamartelly/pen/RgayML If you un-comment lines 103 to 108 (pasted in below too) you can see the animation breaking when I try to start implementing step d). .fromTo(coin.heads, flipTime,{ scaleX:1, x:0 } , { scaleX:0, x:8 }, "headEnd") Here's the codepen with lines 103 to 108 uncommented, you can see how it all turns to custard: Any help greatly appreciated. Thanks!
  10. Hey Guys, Im quite new to GreenSock. Years ago a friend boasted about it when Flash was very popular, it was to defacto go-to library. So I'm trying to pick up a little bit as a hobby. I was wondering if anyone could assist me in understanding what I'm doing wrong here in my CodePen. I am simply trying to "Reverse" or "Yoyo" it back, so it keeps going back and forth. I tried several ways but I am certainly getting it wrong
  11. Hi, i do some basic mistake in my code, please look to my codepen. You will see in result title/subtitle than empty hole and at the end two closing links. But I wanted to have visible some form/marketing stuff which i call .js-main-boxies and hidden divs with classes .js-cta-form1 and .js-cta-form2. My timelines are paused by default, so question is why I see broken version and not correct one? pen is without CSS so problem can not be in that. When you remove timelines tlMeetingFormClose and tlOnlineFormClose it works, but of course closing functions not. Interesting is that when you click on "form 1 close", than click on "click 1" you will see posibility of clicking to "form 1 close", but it is not working. Any help or advice appreciated thx
  12. Hi there! I'm a total newbie but already enjoying playing around with Greensock. I'm working on an accordion menu, and this is the behavior I'm going for: 1. User clicks on a menu item. 2. Menu item's panel is revealed. 3. A sequence of three animations is triggered within that one panel. 4. User clicks to collapse menu item and the whole thing is reset. Right now, the fader animation I have on animEvent is triggered on window load and subsequent user clicks change nothing. I'm thinking I need to use TimelineLite to start the animation when the specific menu item is clicked. But I'm very new to this and would appreciate someone pointing me in the right direction. Thanks! Hilary
  13. Hi there! Thank you one more time for a such great library. On my codepen when I press "down" button square to starts move down. If you press the "reverse" button during this time, the following behavior is expected. First, the square returns to its initial position, and then starts moving to the right. So, I need to add a tween at the beginning of the timeline in such a way that to shift the following siblings. In my codepen I add tween at the beginning of the timeline but it has no influence for next siblings.
  14. In my Codepen example, there is a gold circle. When you click the gold circle, it moves around the page using `x` and `y`. If you click the circle while it's moving around, another timeline animation for the circle gets queued and runs after the initial one has finished. I want to prevent this behaviour. My instinct tells me to use lodash `throttle`, but I feel there should be a better way to do this, especially as I would need the duration of the animation to use a throttle. I want any click to the circle to have no effect if the animation is in progress. Is there a `TimelineMax` method I can use to achieve this?
  15. In my bounce codepen, I am using a `Timeline` to tween `y`. These durations are all different as the bounce distance changes, as the ball loses momentum. I am also tweening `x`, which is a single duration so that the ball travels. I want the `x` duration to be the same as the sum of all the `y` durations. Currently, if I add another bounce to my `y` sequence, it will throw off the `x` duration. Is there a nice way to do this so that my `x` duration just works without me having to manually tightly couple it to the sum of the `y` durations?
  16. Hello I have a list of items, using a stagger as it load on the page (going to use it with scroll) - this is fine. But then I am also trying to apply an animation when hovering over one item. I have it all in the CodePen. After trying a few things myself, I ended up looking at this example: For some reason, when I hover on one it still apply the animation on all list items. Not sure if I am selecting something wrong / missing something. Any ideas? Thanks in advance.
  17. I have a simple timeline that shows my headline then fades out. <div id="headline1">Dynamic text that may be 1 - 60 characters.</div> var tl = new TimelineMax(); tl.from("#headline1", 0.4, {autoAlpha:0}) //headline fade in .to("#headline1", 0.4, {autoAlpha:0}, "+=3.5"); //headline fade out Is it possible to make my headline visible depending on how many characters are in my headline? ie: 10 characters = 1 second before fading out 60 characters = 5 seconds before fading out
  18. i'm trying to use the window vertical scrollbar of the browser as slider of an istance of timelineMax. i'm also using the plugin scrollToPlugin. all seems working, with the not negligible detail that the timeline.progress is not the same of the scrolling percentage. Both, timeline progress and scrolling start from 0 and end to 1, but in all other points are differents. so, if i try to move the verical scrollbar (as timeline slider) and then i set the timeline.progress with the scrolling percentage, the scrollbar (and the page) move immediatily to another position, very different position. I prepared a simple page at this address www.attivitacollaterali.it/testArea/scrollTimeline.html (all the scripts are in the head - do no use the mouse wheel when scrolling) Maybe all the world knows "why" this strange behavior, excpet me. Thank you.
  19. Hi, First of all thank you for developing such an amazing lib and it has made our lives much simpler. We are developing a major website using greensock where all the animations are being handled by various timelines. it is a single page website so there is no page refresh. The top navigation helps navigating between timelines by tl.play(). These timelines also have a loop of flickering text set to repeat -1 The issue arrises when we load a new timeline and go back to the previous timeline. Then the loop starts running twice and the page crashes. I wish to kill all timelines on the document whenever a new timeline is loaded. Because there are like 20 chapters, it would be very very tedious to kill all animations on every click. I tried using TweenMax.killAll(); this abruptly kills all animations ( even if i have an animation playing ) and the next animation doesnt play. I tried using chap2.kill(); this works nicely but is not expandable. There are going to be 20 chapters which will make developer's life miserable. My code : chap1 = TimelineMax chap1.to(something) chap2 = TimelineMax chap2.to(something) // option 1 (not working) //click on chap1 in top nav TweenMax.killAll(); chap1.play(0); //click on chap2 in top nav TweenMax.killAll(); chap2.play(0); // option 2 (working but tedious) //click on chap1 in top nav chap2.kill(); chap1.play(0); //click on chap2 in top nav chap1.kill(); chap2.play(0); Can you please help me out over here. How to use killAll to enable a seamless display of animation. I was short on time so didnt make a codepen. If my query is not clear I will make a codepen n provide the details too. Thanks for your product. I hope it will keep on becoming better every day.
  20. Hi all! In the attached CodePen, I have a reduced test-case of a UI I'm working on. On desktop-view (768px and higher) if you click the "Open Convo" button, the Inbox and Convo panels will both be on the screen by manipulating their `flex-basis`. If you then click the "Open Profile" button (enabled when you click the "Open Convo" button on desktop, you'll see the entire `.app-panels` transform over to show that area. I have a slightly different UI if you interact with the panels on mobile (767px and lower --- do a refresh to interact with mobile and just drag the window in smaller so the other timelines run don't conflict <-- one of the things I'm trying to fix). If you go through the same steps as mentioned above, you'll notice just the `.app-panels` div transforms to show the full-width version of each panel within it -- which all works fine. Now -- refresh and start with the desktop-view again and open the Convo. What I'm doing in the resize listener `optimizedResize.add()` is checking if the convo desktop timeline has been run by using `progress()` and if it is complete and on-resize if it's in a mobile-view, I want to set the progress of the desktop timeline back to the beginning and then set the progress of the mobile timeline to 1 (or finished). I have a `clearProps` helper in the `onReverseComplete()` callback of the desktop timeline, but the ending prop styles of the desktop timeline still remain, so it messes up the mobile-view. I know that's kind of a cluster-f*ck to throw at ya, but hopefully that's a good enough explanation. I'm not sure if it's an issue with editing the state of GSAP timelines within a resize event or if it's the nature of calling the `progress()` function of two timelines that could override each other. Let me know if you need anymore clarifications. Thanks for checking this out!!!
  21. Hey guys, I'm new to GSAP and was wondering if there's an easy solution to start the timeline AFTER all assets/images have been loaded. Maybe even with a circular preloader e.g. Thanks for your help
  22. Hi, I'm using Angular UI-router to build a one-page site with a looping, draggable navigation, and want to use TimelineMax to animate a sprite on the transitions. What I've got so far (see Codepen link) is that when the user drags or swipes the target area, the animation plays or reverses (depending on swipe direction) and the new section loads. So far so good. However, I want the drag/swipe action to actually control the progress of the sprite, so that users can scrub through the timeline. Then, when they release the drag or swipe, the rest of the animation to play and the next page to load. Another thing I've noticed is that once I've swiped through all section of the page and looped back the beginning, the sprite no longer animates - the Timeline just jumps to the next sprite image. If you change direction it then starts working again. Any help greatly appreciated! NB: The individual page content won't load on the Codepen demo, not sure why, but it doesn't matter to the issue I'm trying to resolve here. Cheers.
  23. this.tl .to(alpha, 1, {x: 100, ease: Circ.easeInOut}) .to(beta, 1, {x: -100, ease: Circ.easeInOut}, 0) Hi, I'm wondering if its possible to exclude the second animation only when reversing the timeline. tl.play() should play both of them. but when tl.reverse() it should only play the animation on the "alpha" element.
  24. Hi all! I'm noticing an issue with GSAP merging in transform properties originally formed in the CSS. I've attached a CodePen to show the issue. In Chrome, you'll see that both Dropdowns align to the center as intended. But in Firefox, IE11, and Edge -- it looks like the transform matrix that is generated is not including the calculated width of the dropdown component when transitioning. We can't use fixed widths (in the example that works) for a certain application, and found it really odd that only Chrome and Safari are handling this alright. Let me know if you need anymore info. Thanks as always!
  25. I'm setting a delay as a negative number to simulate staggering. I'm wondering if there's a better way to achieve this with nested timelines.
×