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

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. Hey people! I'm working with a TimelineMax timeline. I want to run an animation first. After the first animation I want to resolve a promise. Then later in a separate function I want to reverse this timeline animation After this animation I want to resolve a different promise. I'm not sure how to do this. Any advice?
  2. Hello, I have been looking into getting a smooth scrolling effect using GSAP. After looking into Scroll Magic, I realised that what I want to achieve can be done using just using a GSAP timeline. I found something on Codepen which had a similar look to what I was after. I have tweaked this myself but have come to point where I need a bit of help/advice. Basically, my webpage will consist of one page made up of 3 full width sections, each one being 100vh/% in height (so 3 separate panels). The first panel will contain some information and a background image. The second panel will also contain some content but will have a background video applied instead of an image The third will be the same as the first, only with a different background image being used. What I'm trying to achieve to have the panels transition into one another smoothly as you scroll. A simple opacity swap and scale tweak so that as you scroll down the page, panel 1 fades into panel 2 and then panel 2 fades into panel 3. I am having some difficulty with my timeline I think. Currently the top 2 panels fade into each other quite well but I'm having difficulty adding the 3rd panel into the mix. If anyone can offer any advice/help on this then it'd be much appreciated. My codepen URL is https://codepen.io/anon/pen/ZobLYL
  3. Hi, I'm wondering if it would be possible to randomise number AND pass it to the animation on update: $('.dot').each(function(e){ var floatingThis = new TimelineMax({repeat:-1, yoyo: true, onUpdate: update}); var timing = Math.floor(Math.random() * 10) + 8, posY = Math.floor(Math.random() * 90) + 0, posX = Math.floor(Math.random() * 100) + 0; function update(){ timing = Math.floor(Math.random() * 10) + 1, posY = Math.floor(Math.random() * 90) + -90, posX = Math.floor(Math.random() * 6) + 1; // console.log(timing, posY, posX); // floatingThis .to($(this), 1, {x: posX + 'vw', y: posY + 'vh'}); // floatingThis.play(); } console.log(timing, posY, posX); floatingThis .to($(this), 1, {x: posX + 'vw', y: posY + 'vh', ease: Power0.easeNone}); }); I'm pretty sure it is , I think I saw something on the web and probably an answer here on the forum, but I can't find it anymore. I'd like my dots to float randomly (at least on the y axis, on the x axis as well bu not that far) on the page, not sure if it can be done using onUpdate tho. Another question/issue, vh and vw are not working at all, I'm randomising number between 90 and 0, so let say that it's 80, my dot should go out of the screen, but it's not the case, all my dots are staying almost on the same line without going further. So either I can't use vh and vh and than the animation shouldn't work at all or it should respect vh and vw value (that's my understanding). Thank you
  4. Hey all, I'm getting an issue in Chrome when all my page animations stick part way through for a few milliseconds causing a jittery moment. It's during the animation of an SVG logo where I'm staggering the animation of letters of 2 words into view at the same time. I've attached the screenshot of the issue in Devtools where I believe a grey and striped area means unidentified/unknown (to DevTools) activity that is not occurring in the main thread. If I take out the second stagger the issue disappears. Has anyone come across this before or have I done anything funky below? I can't share a Codepen here unfortunately as it's very brand sensitive at the moment. Thanks in advance! hltl.set('.home-logo', { autoAlpha: 1 }) .set('.home-logo__tm', { opacity: 0 }) .set('.home-logo__plus-horz', { opacity: 0 }) .from('.home-logo__plus-vert', 0.5, { scaleY: 0, ease: Power4.easeIn, transformOrigin: "center center" }) .set('.home-logo__plus-horz', { opacity: 1, immediateRender: false }) .from('.home-logo__boys-border', 1.0, { drawSVG: '0% 0%', ease: Power4.easeOut}, 0.5) .from('.home-logo__girls-border', 1.0, { drawSVG: '0% 0%', ease: Power4.easeOut}, 0.5) .from('.home-logo__plus-horz', 0.5, { rotation: -90, ease: Elastic.easeOut.config(1.0, 0.5), transformOrigin: "center center" }, "-=0.35") .staggerFrom('.home-logo__boys-letter', 0.4, { y: 150, ease: Power2.easeOut }, 0.07, "-=0.4") .staggerFrom('.home-logo__girls-letter', 0.3, { y: -150, ease: Power2.easeOut }, 0.07, "-=0.9") .set('.home-logo__tm', { opacity: 1, immediateRender: false }) .from('.home-logo__tm', 0.5, { x: -50, ease: Power2.easeOut }); hltl.timeScale( 0.7 );
  5. Hi, i'm building a demo for a card game and i got it working thanks to the amazing hints of the experts in this forum. I think i developed the hardest pieces and now i want to play with the timeline to make some animation happen at the same time. I already watched the good tuts and read the documentation about timelines but something goes wrong with this specific case. Please have a look here https://codesandbox.io/s/0v6p9z27n In the animation.js file at line 103 you have the animation that is fired when you press DEAL. The animation consists of 4 parts (line 113-116), if i put a label to the last two animation (to make them run at the same time) it stops working. Can you please help me with this issue? Thanks!
  6. Hello! I am trying to build like a wave animation but using multiple elements, in the pen I left, there are 6 levels with some circles in each level. The current animation behavior is... each level of elements starts right after the previous one finish but the behavior I want to achieve it's like a fluid wave, so when the first level it's like at 50% of it's animation, the next level should starts and the same for the next levels, so a complete wave will be visible in the timeline and of course when the last level finish, the wave will start again. Can you help me with that please?
  7. Hi, I have a timeline which I created beforehand and put it on pause. Then on trigger I run it with tl.play(0) it plays correctly the very first time but subsequent repeats are not right. What am I missing? Thanks for help!
  8. Hi, I am trying to launch my timeline without any success. Tweens are being added correctly to the timeline, however .play() does nothing - no errors neither. If I use TweeMax straight away in openContact() animation will occur. I am using Angular CLI 5.2.9 and gsap 1.20.4, here is the code: import { TweenMax, TimelineMax, Power2 } from 'gsap'; ... tween_home = TweenMax.to('#home', this.animation_time, { ease: this.ease, display: 'none', opacity: 0, scale: 0.7 }); openContact(): void { const tl = new TimelineMax(); tl.add(this.tween_home); console.log(tl); tl.play(); } Any ideas what am I doing wrong, how to launch it? UPDATE: This works: openContact(): void { const tl = new TimelineMax(); tl.add(TweenMax.to('#home', this.animation_time, { ease: this.ease, display: 'none', opacity: 0, scale: 0.7 })); tl.play(); }
  9. Hi, What is the right code to add tweens and functions to a timelineMax at the same time? Thanks!
  10. Hello, I have been using GreenSock tools for a few months now, but I am hitting a bit of a wall with timelines that I don't know how to overcome. I have successfully created 4 animated timelines that individually run when I call a start() function, e.g. TL1.start(), TL2.start(), etc. I now want to create a conditional timeline that plays one to four of the other timelines depending on an argument in the super-timeline's function, e.g. : function superTimeline() { this.superTL = new TimeLineMax(); // code code code this.start( number) { var number = number this.superTL.add(TL1.start, 0); if ( number > 1 ) { this.superTL.add(TL2.start, 2); } if ( number > 2 ) { this.superTL.add(TL3.start, 4); } etc... this.superTL.restart(true, false); } } My problem is that the super timeline is not even calling the first, non-conditional timeline function (TL1.start). Can someone please tell me what I'm doing wrong? Cheers, GR
  11. 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/
  12. Hi all, I would like to replicate the App Store Featured App/Games animation. See this to see what it may look like: https://alfian.d.pr/B7ZbXP Basically, there will be 2 elements in which the styles would be the animated before modal is opened and a different styling after modal is opened. In the App Store case, its the image (increase width size) and the modal title (change x value position). In my Codepen, I would like to replicate such an animation but I have no clue to using the GSAP code to do this. I know I asked a similar question to which the answer was to use SPA (Single-Page Application), but for this case I think its possible to animate with modals. I am using this plugin for the full screen modal pop-up. Any ideas? Thanks, Alfian
  13. 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
  14. 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); });
  15. 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.
  16. 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.
  17. 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
  18. 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.
  19. 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
  20. 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
  21. 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
  22. 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.
  23. 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!
  24. 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
  25. 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.
×