Search the Community
Showing results for tags 'Timeline'.
-
I'm trying to tween an element that has a relative height and it sits inside a container with relative height using absolute positioning. The desired tween animation is to move the element from the bottom of the container until it reaches the center. I'm also using scrollmagic as this animation should only appear during scroll to this container. I tried a few ways first way: default css of the element is already absolute positioned to center, container { position: relative; } element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } get the height of the element and its container. Minus off the element height from the container height. divide result by *two pass this height as a parameter in tween created window resize function and update the heights and also refresh the scenes scene is updated but tween is not. The culpit here is Tween not refreshing the variables on resize. Second way: default css of the element is at the bottom of the container with bottom: 0; position is still absolute used a to tween with top: "50%", yPercent: -50 this doesn't put the element in the center it's not centered and it only moves slightly The culpit here is using bottom: 0; and that breaks the absolute centering. Without bottom zero it works but the element comes in from outside of the container. Is there a workaround to this? Please help. Thanks! -
Hi there, love the GSAP library, but having a strange issue that I've never really had to address before. I wish to create elements dynamically on the page outside of the GSAP timeline, then within a created timeline, have the selector pick up whatever set of elements are currently matching the selector. The issue is the set appears to be 'cached' with repeat loops of the timeline. The codepen is similar to my code, but stripped down to just the basics of what's not working. In the last staggerTo, the elements are moved and then removed from the DOM. The onRepeat calls the same function to add new ones to the DOM, but repeat loops of the timeline don't evaluate the selector contents each time. As a side note, I was a little surprised that the onStart function didn't run before the rest of the constructed timeline, including the staggerTo's. I guess just a failure in how I comprehend the staggerTos are functioning, it's related to the same issue really, in that I need to be able to tell staggerTo, only evaluate the selector once you get to whichever part of the timeline. I did manage to get this working by using .add instead of the stagger, and inside there creating new timelines being passed the same selector and returning a set of tweens. These at least seem to be executed as the timeline 'reaches' them. Hope someone can provide some assistance or help me get my thinking straight about why this is expected behaviour and the correct method I should use to achieve what I'm after. Thanks!
-
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.
-
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
-
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?
-
HI there! I have some anchor elements that animate on hover ( image, overlay, two span texts ), all works fine, BUT, in the codepen you will notice that if you quick hover and out the elements the animation elements are not coordinated properly and the animation is not sequenced properly. Some time ago i used a solution that apply the timeline in "each" element and then the hover fires two functions, over and out, that plays and reverse the each animation, this method works perfect ( the animations remains consistent ) but i´m getting errors to implement it. This will be my definitive way to animate on hover elements independly Can anyone help me to find the solution? This is the code i have now "working": //box home is the container element $(".boxHome").hover(function(){ var imagen = $(this).find("img"); var overlay = $(this).find(".overlay"); var texto1 = $(this).find(".textoBox"); var texto2 = $(this).find(".textoBox2"); var tl = new TimelineLite(); tl.to(imagen, 2, { scale: 1.2, ease: Power4.easeOut}) .to(overlay, .4, { bottom: 0, ease:Power3.easeInOut},".3") .to(texto1, .4, { bottom: 65, autoAlpha: 1, ease:Power2.easeOut},".5") .to(texto2, .4, { bottom: 30, autoAlpha: 1, ease:Power2.easeOut},".7"); }, function(){ var imagen = $(this).find("img"); var overlay = $(this).find(".overlay"); var texto1 = $(this).find(".textoBox"); var texto2 = $(this).find(".textoBox2"); var tl = new TimelineLite(); tl.to(texto2, .4, {autoAlpha: 0, bottom: -60, ease:Power2.easeIn}) .to(texto1, .4, {autoAlpha: 0, bottom: -60, ease:Power2.easeInOut},".2") .to(overlay, .4, { bottom: "-100%", ease:Power3.easeInOut}, ".3") .to(imagen, .7, {scale: 1, ease:Power2.easeInOut},"0"); }); Thanks! Sebastián.
-
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?
-
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
-
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.
-
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.
-
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.
-
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
-
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!
-
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
-
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
-
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.
-
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? -
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?
-
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.
-
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
-
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.
-
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.
-
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!!!
-
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.
-
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.
