Jump to content
GreenSock

Search the Community

Showing results for tags 'TimeLineMax'.

  • 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 Gsap'ers. Is there a way to go to a label other than just jumping? Example: When clicking the button it goes from the current point of the timeline to the label, but keeping the tweens in sequence.
  2. Hey there, I'm posting as I received some great advice with my animation before. The goal is to have the car follow the route, and it seems to work perfectly on mobile. The pertinent lines of code are below, and shown in action in the codepen .set("#Car", {transformOrigin:"50% 50%", xPercent:-50, yPercent:-50}) .to("#Car", 7, {bezier:{values:MorphSVGPlugin.pathDataToBezier("#CarPath", {align:"#Car"}), type:"cubic", autoRotate:90,},ease:Linear.easeNone}) However on chrome mobile the linked codepen should produce the car doing doughnuts on the grass area offroad. I'm wondering if anyone can help me identify the code causing it. Hopefully you can replicate the issue as a couple of friends couldn't reproduce in on their devices. Thanks for taking your time to read my post. -Tom.
  3. Guest

    Fluid zoom between images

    There is a slight hesitation in my animation when the first image has completed its zoom and is hidden while the next image in the sequence is made visible. Any suggestions? I'm thinking a negative overlap but I can't get it to work. Thanks.
  4. Hello, I am new to this forum, and at beginner level of javascript/GSAP. I am creating a looping slideshow with motion - with sliding transition. It works as intended, but at the end of the last slide, I need the first image to slide in from right to left. Now there is a gap between the last slide and the firs slide. Each slide is wrapped in a div.slide, and I create a timeline for each slide, which is added to a master timeline. My approach is to check if next slide exist or not, and then pull in the first slide, if it does not exist. nextSlide = i < totalSlides ? $(slides[i + 1]) : $(slides[0]); + slideTl.fromTo( nextSlide, 0.9, { left: 300, top: 0, }, { left: 0, top: 0, ease: Expo.easeInOut }, '-=1' ); Here is the complete javascript code. $(function() { // Slider variables var width = 300; var slides = $(".slide"); var totalSlides = slides.length; var tl = new TimelineMax({ repeat: 1 }); var slideTl; var activeSlide; var nextSlide; //slider for (var i = 0; i < totalSlides; i++) { slideTl = new TimelineMax(); activeSlide = $(slides[i]); nextSlide = i < totalSlides ? $(slides[i + 1]) : $(slides[0]); slideTl.to(activeSlide, 2, { x: -width, ease: Power0.easeNone, force3D: false }); slideTl.to(activeSlide, 1, { x: -(width * 2), ease: Expo.easeInOut }); slideTl.fromTo( nextSlide, 0.9, { left: 300, top: 0 }, { left: 0, top: 0, ease: Expo.easeInOut }, "-=1" ); tl.add(slideTl, "slide-" + i); } }); and here it is on codepen: https://codepen.io/Siktreklame/pen/mXJaBL
  5. Hello fellow tweeners! Hit a brick wall here even though I feel like I've done the hard part. I've been referring to documentation for hours trying to solve this. I'm trying to fire my page loading counter after it fades in, via the tween that does so. Everything is setup & neatly organised/labeled but I'm just butchering the last part lol. The three parts I'm using are marked with lots of asterisks & notes explaining what I'm trying to do. The load counter needs to be nested inside the "onComplete" callback which is already being fired by my tween (console log works)... just not able to get the countdown in. *sigh* Any help would be massively, massively appreciated. Loving the library & community equally! Cheers, Smallio Sorry for the newbie question <3
  6. Hey everyone, thanks in advance for your time. I've searched the forums for common solutions, but i'm a bit too new to JS to translate the more complicated ones into my simple task. I'm currently trying to get the animation in the provided codepen to work with the included mouseover feature correctly. If you try and mouseover while the animation runs, you'll see that the text elements fail to tween in by the time you mouseleave. I've searched the forums for solutions, but i'm still pretty new to JS so i'm rather dense as to how to use the isActive() function, which I assume would need to be used to prevent the mouseover working until all the intro elements have tweened in. To replicate this, try to mouseover straight away on the provided codepen, and you'll see that the text fails to appear from the intro animation. I've annotated the codepen, but here's the mouseover part. var wwdtransition = new TimelineMax({paused:true}); wwdtransition.to ('.screenobject',0.5,{y:300, autoAlpha:0}) .to('#playbutton', .3, {autoAlpha:1},"-=.2"); ; //mouseover functions $(document).on("mouseenter", ".col-md-12", function() { wwdtransition.play(); }).on("mouseleave", ".col-md-12", function(){ wwdtransition.reverse(); }); Thanks again for your time, i'm really enjoying using GSAP, and with a solution to this, I imagine I can just copy + paste it to replicate the effect in future work.
  7. So I'm working on a client site in webflow - http://emma-dodi-final.webflow.io/about In the about section I'm trying to get the two photos coming in while the text is animating. For some reason "-=" & "+=" seem to have no effect on this snippet. Elsewhere in the site I've used them and they work perfectly. Anyone know what the deal is? var tl = new TimelineMax, mySplitText = new SplitText("#meetEmmaText", {type:"words,chars"}), chars = mySplitText.chars, //an array of all the divs that wrap each character emmaPhoto = $('#emmaPhoto'), flowerPhoto = $('#flowerPhoto'); TweenMax.set("#meetEmmaText", {perspective:400}); tl.staggerFrom(chars, 0.5, {opacity:0, scale:0, y:20, rotation: 20, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.01); tl.staggerFrom(emmaPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, "-=1"); tl.staggerFrom(flowerPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, "-=1"); Thanks in advance
  8. I suspect that this topic has been approached in the past, but I want to bring my own 2 cents to the table (if you'll have my cents ::- D). Since we can add onComplete and other such callbacks upon construction, why can't we add it later directly in the instance (if we saved the reference to the instance of the TimeLine or Tween). For example, in my situation, I want to add an onComplete to a TimeLine, but only sometimes. It's clumsy to call the constructor in an if statement. I would prefer to call the constructor and append methods and only later add the onComplete event (or any other such events). Are you just saving space in the library? Because as far as I suspect, this would be a piece of cake to make. Could you perhaps advise how to implement this as an extension to your library? I'm thinking of extending the TimeLine class and add the properties myself. Size is not a concern for me (these days, for who is?).
  9. Hello, I have a problem with an animation I am trying to do. I am trying to build a button which can be fed different states like error, load and done, which in return should play a specific animation seamlessly. That means the loading state goes seamlessly into the error or done state. The error state should also be able to transition into the loading state. I have created a pen to show you the structure of this mess. I probably have a problem with structuring the different timelines, but I am not sure. I would be super happy if someone could have a look at this and point me into the right direction. Cheers Thomas
  10. I am trying to develop an animation web app that uses Greensock under the hood. The idea is to have a user interface that stores all the information parameters in an array and then a function translates that into an animation. The loadAnimation() function fires everytime the array is modified so you can see the updated animation. Everything works fine if I use "to" tweens, but with the "from" tweens only works the first time loadAnimation() is executed. I tried to reproduce the problem with the attached codepen. If you have only "to" tweens and you execute twice the loadAnimation() the animation is right, but if there is a "from" tween it stops working.
  11. Hello, I made a little animation with gsap, and i really like how easy it is. But while it look great on y computer (gtx 1080), my coworker has heavy performance issues (imac 2007). Be both use the same browser (chrome), and he has better performances with last firefox build. I saw some people switching to canvas/paperjs, but i look like painfull. I'd like to know if the performance issue is about the number of animated elements (~432) or the way i build the timelinemax (in loop). Here is the pen : https://codepen.io/kaliel/full/XVbGvY/ Thanks
  12. This question is in reference to a previous question I've asked here on the forum. I wanted to achieve the similar transition effect as shown in SCABAL and thanks to the suggestion of @Carl , I was able to achieve the same effect with help from TimelineMax. However, I believe the method I used isn't very responsive friendly. Becuase in order to achieve the similar effect as shown in scabal.com, I tried doing it with TimelineMax(here) and used relative and absolute positioning which completely messed up my mobile responsiveness. To counter this, I have used CSS grid and made a layout which is responsive(here) but I am not able to achieve the same effect using TimelineMax(with CSS Grid) and I can't / don't want to use relative and absolute position in this case. I believe, if I use from( ) and bring the panels to the default state, I will have the effect I am looking for. TLDR: How can I achieve the same effect(as shown in Scabal when you scroll down) only by using from( ) and set( ) method? I've tried but I couldn't get it right. Thank you so much for your time. Help is really appreciated. This is bugging me for quite some time now.
  13. Hi all! So I have my div, which grows to fill it's parent on click. When you first load the page, it works beautifully. Smooth and natural. But when I go to resize my browser the animation starts doing funny things. I have been wracking my brain on this for a week now and I'm just not understanding what the issue is. I've inspected and tinkered with nearly all the values and attributes in a ton of different combinations and I can't crack it. Any ideas? Thanks in advance for any and all help. I hope you've been having lovely holidays and have big things coming up for the New Year!
  14. Hi, I have a problem to understand the "set()" method. This is my html code (extract): <svg....> <path id="nube" opacity="0" ....</path> </svg> and this my js ("nube" is a reference to id="nube" in Angular 5): let tl = new TimelineMax({ delay: 3, repeat: -1 }) tl.set(nube, { opacity: 1 }) tl.to(nube, 9, { y: '-=30px',x: '+=17px', scale: 2 ,opacity: 0, ease: Linear.easeNone, repeat: -1 }, '') The problem is that the element "nube" is shown on start but I think that it should be hidden until 3s of delay. Why is showed on start? How can I do the element is shown when "tl" is started (with 3s delay)? Thanks in advance.
  15. Hi, Is it possible to exclude child elements from being affected by a transform? specifically in the linked codepen: is it possible that the div containing the 'X' will not be moved even thought it's parent is being moved? Thanks ! Elior
  16. Hi all, My issue here is a bit two-fold. I've been making steady progress on this project, but I've hit another wall. The first issue is that since I've added my Timeline for the second animation, the animation opens immediately on browser load. The second issue is that my Timeline doesn't seem to be running the .fromTo() I've defined for it. So what I'm attempting here is to define the first animation, define the second animation, toggle the first with click, toggle the second with timeline onComplete of the first animation, and then to be able to reverse the whole sequence on click again. I've made a mess of my code I think and I'm having a hard time piecing it all together. I feel slightly bad about having so many questions/requests for assistance. If I'm asking an inappropriate amount or types of questions please feel free to let me know, I wouldn't want to violate any forum rules. Whatever you can help me with I will greatly appreciate and I thank you in advance.
  17. First of all sorry for not posting codepen URL, for some reason, my code isn't executing on codepen. Below is the TimelineMax code I prepared for the kind of animation I need. tl .to(panel1, 0.3, {width:'50%',ease:Power3.easeOut}) .to(panel2, 0.3, {left:'50%', ease:Power4.easeOut},panel1) .to(panel2, 0.3, {height:'50vh',width:'25%', ease:Power1.easeOut}) .to(panel5, 0.3, {width:'25%',height:'50vh',left:'75%'},panel2) .to(panel3, 0.3, {top:'50%'},panel2) .to(panel3, 0.3, {width:'25%',height:'50vh'}) .to(panel4, 0.3,{left:'75%',width:'25%',top:'50%'}); You could see how panel2 and panel3 have more than one ".to" that is because of the kind of animation I need where panel2 should first get to 50% left and then get to 50vh height, 25% width. Now, I want panel5 to follow along with panel2 but not the first panel2 but the second one. How can I target only the second panel2 (the one with height: '50vh', width:'25%') for the panel5? Hopefully, it makes sense to you. Thank you so much in advance. Any help is appreciated.
  18. Hello Greensockers, Here's another gifani-inspired greensock animation The animations of the triangle are identical in the "use" copies. I tried to slightly modify the animation of the copies. But the code only partially works. (in the code after / * this -> * /) Attached gif animation shows what the result should look like. Is my approach a possible way? Or do I have to animate all triangles individually? Please leave your two cents
  19. Hello I have a (probably) silly question - is it possible to animate whole timelineMax via tweenmax or another (parent) timelineMax? I have long experience as flash/adobe animate animator and I normally would put animation in movieclip and then animate that mc (like for example in simulating camera zoom). I could probably make something like that with gsap (put timelineMax into mc, then make another timelineMax/tweenMax on root), but it isn't greatest solution... Thanks, Remigiusz
  20. Hi , I have a application where i need to zooming the video at some point of time , but the video zoom is buggy at sometimes , can you provide me any solution, it is not very smooth . I have attached some sample code with the codepen , Don't ask about lot of Div's , because i had removed lot of DOM's for easy understanding. In the example , I have zoomed in the video for scale 5 and zoomed out to scale 1. You can see that there is some hanging here and there , Please help.
  21. Hi! I'm new to this community. Can someone tell me if I can create independent timelines and fire them at will even if they will overlap? For example: var tl1 = new TimeLineMax (){}; tl1.[some animations]; [later in the document] var tl2 = new TimeLineMax (){}; tl2.[some other animations]; Problem is - when tl2 fires, tl1 stops. What I need: I need to operate timelines independently, fire them at any moment without interferences with each other. Haven't found anything useful in the docs. Thanks!
  22. 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!
  23. Hello GSAPers, I did a project here using DrawnSVGPlugin, SplitText, ScrollTo and a few others, and found a challenge: The challenge is the dynamics of the Casting link. I'm targeting, some Timelines that are triggered with click events on the bookmarks next to the photo. Each indicator is linked to a Timeline, however all this content is only in one component (Home.vue); Example: Upon entering the Component it triggers the Timeline of Intro, which pulls a button that to the clicked triggers the Casting Timeline, there is the question: Which way when I click on the casting button does it already enter by jumping the timeline of the intro and automatically firing the Casting Timeline? I believe the best way would be a check to know if entering the component it is coming from an internal route or an external link, but I do not have the slightest idea how to do it. Thank you very much in advance. The project is in this link (provisional) http://marcelocalcados.com.br/
  24. I'm very new to GSAP, so apologies if this is a simple question, but I couldn't seem to find the answer anywhere. As you see in the codepen, I'm trying to animate this gold bar across the screen (and fade it in/out) in three tweens. However, between each tween in the timeline is a distinct pause for a quick moment before the next tween begins. I tried firing the tweens before the others finished, but that seemed to break the animation when it repeated. How do I make this animation one continuous motion and allow it to be repeated indefinitely? Here is my js right now: var $loader = $('#load'), tl; tl = new TimelineMax({repeat: -1}); tl.from($loader, 1, {x: '-=40%', transformOrigin:"0% 50%" , autoAlpha: 0, scaleX: .2, ease:Power2.linear}) .to($loader, 1, {x: '+=60%', ease:Power2.linear}) .to($loader, .8, {x: '+=10%',autoAlpha: 0, scaleX: .2, transformOrigin:"100% 50%" , ease:Power2.linear});
  25. Hi, I want to know how to clear all the animated properties from TimelineMax at once. not individual. like onComplete clearProp all or something like that and all the nested elements also. is there a way to use wildcard selector? ex: var tl = new TimelineMax({id:"sliderOut", autoRemoveChildren:true, onComplete:function(){ // i want to clear all the animated values and properties at once not individual }}); tl .staggerTo($nameSplit.chars, 0.4, {y:'-10', autoAlpha:0, ease:Power4.easeInOut},0.05,"+=0") .staggerTo($descSplit.words, 0.4, {y:'-10', autoAlpha:0, ease:Power4.easeInOut},0.05,"-=0.5") .staggerTo($techSplit.lines, 0.4, {x:'10', autoAlpha:0, ease:Power4.easeInOut},0.05,"-=0.5") .to($slide_img, 1, {yPercent:'10', autoAlpha:0, ease:Power4.easeOut},"-=0.5") .to($slide_left_svg_bg, 1.5, {x:'20%', autoAlpha:0, ease:Back.easeInOut},"-=0.5") .to($slide_right_svg_bg, 1.5, {x:'-20%', autoAlpha:0, ease:Back.easeInOut},"-=1.5") .staggerTo($staticTitleSplit.chars, 0.5, {y:'20', autoAlpha:0, ease:Back.easeOut},0.03,"-=1.5") .staggerTo($numSplit.chars, 0.5, {y:'20', autoAlpha:0, ease:Back.easeOut},0.03,"-=1.5") .to($left_out_bg, 0.5, {x:'100%', ease:Power4.easeOut},"-=0.5") .to($right_out_bg, 0.5, {x:'-100%', ease:Power4.easeOut},"-=0.5");
×