Jump to content
GreenSock

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

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

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

  1. Hello Gsap'ers, Another post about the function so requested: Transition between pages using our beloved GSAP. But unlike the others, instead of questions, I am bringing some answers. I decided to make a Simple site template with SPA, which I believe will help everyone who is looking for solutions to these tools without having to use a framework. The activation of transitions is very simple: just click on the photos to go to the corresponding page. I hope it's useful. Ps¹: It is necessary to use the BarbaJS lib Ps²: Some settings are still missing and you can optimize the codes, best experience in Debbug Mode View Ps³: I'm using the translator hahaha https://codepen.io/Noturnoo/project/full/ZeYREp/
  2. Hi everyone, For my school's graduation showcase website, I have a DrawSVG element in which when completed, will perform an animation on other elements. You can view the code in main.js file here. The problem is on https://fmsstories.com, when loaded, there will be: 1. A slight blink of the original DrawSVG element 2. The elements that were supposed to be animated to view after DrawSVG element is completed drawing comes up first, and THEN disappearing and then appearing again after the animation is complete. This is especially apparent in mobile (i0S 11, Chrome, Safari). How do I fix the 2 problems? I have always thought it might be caching problem, but I have already tried to fix it using caching meta tags but the problem still persists. Is it a possibility on how I write the JS? (sorry, I'm still a newbie in JS!). Thanks, Alfian
  3. Hello, in my current project that is a fullscreen site, the visitor first sees an introduction animation. After thsi animation the timeline is paused. The user now can navigate through diffrent screens by using the mousewheel. Each screens animations are part of the main timeline that is declared global and are labeled. I am using TimelineMax and the main timeline is declared global to access it from everywhere where its needed. Navigating through the screens and all animations are working but I have the following problem: When an timeline section (screen animation group) is running I dont want the user to be able to scroll further untill the animation is finished. But I cant check the current state / status of the main timeline. I have tried .active(), .paused() but according to my logging output they dont seem to change. So how can I access the current state of the timeline? Markup: <!-- HTML TAG AND <head> --> <body> <!-- Screens do also have some markup inside but thats unnecessary --> <div id="screen-1" class="screen"></div> <div id="screen-2" class="screen"></div> <div id="screen-3" class="screen"></div> <div id="screen-4" class="screen"></div> </body> JavaScript TimelineCreation $(function(){ //Get necessary DOM elements with jQuery //and declaring timeline var tl = new TimelineMax(); /* ... some more code ... */ //Creating timeline //Introduction animation tl.add(TweenMax.to(/* my animation */)); //Labels are declared in an array, each screen has an own label tl.addLabel(sceneLabel[0]); //add more animations tl.addLabel(sceneLabel[1]); // more animations ... tl.addLabel(sceneLabel[n]); }); Mousewheelhandler function mouseWheelHandler(e) { //Following condition as always false no matter when triggered, //also tried .paused() but its also not working if ( tl.isActive() === true ) { return; } if (e.deltaY > 0) { //Scrolldown console.log("scrollDown"); currentScreen += 1; } else if (e.deltaY < 0) { //Scrollup currentScreen -= 1; } if (currentScreen > maxScreens) { currentScreen = maxScreens - 1; return; } else if (currentScreen <= 0) { currentScreen = 1; return; } tl.tweenTo(sceneLabels[currentScreen]); }
  4. Im attempting to build a 2 Scene ScrollMagic / GSAP function. Scene 1 is when the content enters the screen, and Scene 2 is when the content is leaving the screen. Scene 1 works fine while using the function's element as a trigger, but when I try to use a child element as the Scene 2 trigger the entire second scene / TimelineMax scene seems to break. --- The first Scene of the function (scene_in) works fine with the triggerElement set as the selector of the parent function: But on the second Scene of the function (scene_out) the triggerElement does not seem to work at all: $('.text-fade-in > ul').each(function(){ var thisSelector = this; var thisLi = $('li', this); var thisLiHeight = thisLi.height(); var fade_in = new TimelineMax(); fade_in.delay(.45); fade_in.staggerFrom(thisLi, .5, {opacity: 0, top: 14, ease: Sine.easeIn}, .15); var scene_in = new ScrollMagic.Scene({triggerElement: thisSelector, triggerHook: 'onEnter'}) .addIndicators({name:"li_fade"}) .setTween(fade_in) .addTo(controller); var fade_out = new TimelineMax(); fade_out.to(thisLi, 1, {opacity: 0, top: -10, ease: Sine.easeOut}, 0); var scene_out = new ScrollMagic.Scene({triggerElement: thisLi, triggerHook: 'onLeave', duration: thisLiHeight}) .addIndicators({name:"li_fade_out"}) .setTween(fade_out) .addTo(controller); });
  5. 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.
  6. 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.
  7. 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.
  8. 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
  9. 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
  10. 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.
  11. 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
  12. 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?).
  13. 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
  14. 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.
  15. 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
  16. 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.
  17. 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!
  18. 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.
  19. 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
  20. 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.
  21. 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.
  22. 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
  23. 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
  24. 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.
  25. 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!
×