Leaderboard


Popular Content

Showing content with the highest reputation since 11/13/2018 in all areas

  1. 6 points
    Hi @explorerzip, I had time for a door ...10 However, the driver has to stay at the door, otherwise it will be closed again 😊. Happy tweening ... Mikel
  2. 6 points
    You need to load the Text and ScrambleText plugins. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/TextPlugin.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin.min.js"></script> You'll also probably want to to move those tweens to a timeline if you want them to play in sequence using the position parameter. Happy tweening.
  3. 6 points
    That's really well written actually. To set delay before text fades out again, you can set repeatDelay property. You are setting delay in both from and to values but it will ignore delay in 'from' values. On codepen you don't have to write entire HTML, you can add your scripts from settings and just write HTML body in codepen, rest is not needed.
  4. 5 points
    I think svgOrigin will solve this for you. Just FYI, please don't include member only plugins in your demos. You can find all the CodePen Club GreenSock plugin versions here: Happy tweening.
  5. 5 points
    @explorerzip @Carl @PointC @mikel Thank you for all the help! I'll give this another go with your advice. @mikel big digital hug, great example!
  6. 5 points
    An onComplete fires the moment a tween finishes (as it should). I'm worried that if you think that's not happening and you're trying to add some extra time to "fix" it, you're probably missing the core problem. Sure, you could easily add a function call later in the timeline (wherever you want), or even just use TweenMax.delayedCall() with a specific time, but again, I'm concerned that you may be missing some core issue with what you've built and this may turn into more of a hack than a fix. I'd really like to help - I just can't imagine what the problem could be without seeing a demo. And this is definitely the right place to post a GSAP-related question like this. Absolutely. We welcome it.
  7. 5 points
    SVG doesn't officially support 3D. I'm not so sure your trick of putting a div inside a foreign object inside an SVG is a valid workaround. I think it would be better if you made a reduced test case with just a simple div in an SVG and tried to get it to render the way you want just with CSS (static, no animation). If it is technically possible to achieve, then I would suggest trying to animate it with GSAP. SVG code is a disaster to try to read (not your fault), so it always helps to reduce it as much as possible... for instance there is no need for the carts or even the truck at this point. I would start with a simple rectangle or 2 and work up from there. There are some folks around here who know more about SVG than I do, so perhaps there will be some helpful info for you.
  8. 5 points
    Your sixth parameter should be function, in your snippet it is seventh. I think you accidentally wrote position parameter twice. const heroTimeline = new TimelineLite({delay:'1'}); heroTimeline .add('start') .staggerTo([stage1_h1, stage1_h2], 1, {opacity:1}, 0.25, 0, stage2); https://greensock.com/docs/TimelineMax/staggerTo
  9. 5 points
    Hi iLuvGreenSock, Sorry, but pasting some css styles into your response does nothing to get us closer to understanding why you think an onComplete is firing early. As Sahil noted it is virtually impossible for an onComplete to fire before its scheduled time. I've also increased the tween duration to 3s and onComplete gets fired 3s while tween started slowly and ends another 3s later. Please provide a demo that clearly illustrates this issue and we will do our best to explain what is happening and offer a solution.
  10. 5 points
    Hi and welcome to the GreenSock forums, If your intent is to kill all your animations at once, please see TweenMax.killAll() https://greensock.com/docs/TweenMax/static.killAll() To track individual tweens, yes you can assign them to a variable or push them into an Array. var myTween = TweenMax.to(something, 1, {x:100}); //and then you can kill or control that animation using common methods such as myTween.restart(); myTween.pause(); myTween.reverse(); myTween.kill(); someArray.push(myTween) Also you can grab all tweens and put them in a timeline that you can then control or kill as a group using TimelineLite.exportRoot() https://greensock.com/docs/TimelineLite/static.exportRoot() That's a fairly advanced concept and may not be super easy to grasp for beginners. Definitely crack open the TweenMax docs and explore the methods in the left-hand nav. Its a great way to get an overview of the capabilities of the platform https://greensock.com/docs/TweenMax/TweenMax() and find some stuff you may not know was possible. Don't worry about understanding everything the first time through. Just good to have some mental notes that you can follow up on later.
  11. 5 points
    Hi @Gubbels, Welcome to the GreenSock Forum. Here are a few tips in addition to the good advice from @Sahil. You can build both animations in a TimelineMax and position both with a gap, starting same time or with an overlap (more info here). You can use autoAlpha in the aspect opacity . autoAlpha: Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. Instead of fromTo simply from (= defining the starting values), if the final properties are defined in css - for example css: font-size: 32px; and scale: 0.4. Happy tweening ... Mikel
  12. 4 points
    Hello @evomedia.lt and Welcome to the GreenSock Forum! It looks like you need to use the GSAP special property autoAlpha instead of opacity with visibility property. By using autoAlpha, GSAP will set the right CSS visibility property value for you based on the opacity value and will be better on performance. In your above code example it would be the following with autoAlpha: So to start animation you can do this: var t2 = new TimelineMax(); t2.staggerTo('.letter', 0.2, {autoAlpha: 1}, 0.1); And for your ending animation you can do this: var x2 = new TimelineMax(); x2.staggerFrom('.letter', 0.2, {autoAlpha: 0} , -0.1); When using autoAlpha and you have it fading in from 0 and you need your element hidden when the page loads. Then just add the CSS visibility: hidden to the CSS rule for your element. Then when autoAlpha animates from 0 to 1, it will automatically change visibility: hidden to visibility: visible. and then when autoAlpha animates from 1 to 0, it will automatically change visibility: visible to visibility: hidden. This will allow you not to worry about setting the CSS visibility property when using autoAlpha. You can find more about autoAlpha below: autoAlpha is part of the CSSPlugin - https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. Example of usage: //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); Does that help? if your still having issues please create a reduced codepen demo so we can see your code in action to better help you! Happy Tweening
  13. 4 points
    Hi @wellygirl, There are certainly some alternatives. Here is a variant ... If you need a real candidate for your list ... Happy scrolling ... Mikel
  14. 4 points
    Nice work @mikel You just need the GSAP guy (does he have an actual name?) to hold open the truck door with his tweening powers Future Marvel movie right there LOL
  15. 4 points
    Yeah, @Carl is exactly right, 3D with SVG is not fully supported and is a bit tricky. My advice would be to put each door in its own SVG and rotate the whole thing. It's a little more work, but it'll still scale nicely and should work correctly in all browsers. Happy tweening.
  16. 4 points
    Sure, wanna give it a shot on codepen? Just use this URL: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js Is that what you were hoping for?
  17. 4 points
    From your code, I don't know what you're after. Please create a Code Pen to isolate your issue and I can help you further. At a quick glance (and with some assumptions), I would think you're looking for const timeline = new TimelineMax() timeline .from(el, 0.850, { opacity: 0, // Only opacity here with the following ease ease:Elastic.easeOut, onComplete: () => { done() }, 'someLabel' // Create the label for the Timeline position and set position }) .from(el, 0.850, { y: 50, // // Only y here with the following ease ease: SOME-OTHER-EASE, onComplete: () => { done() }, 'someLabel' // Set position (to label created above) }) .staggerFrom(this.$refs['fullscreen-nav-menu-item'], 1, { y: 50, opacity: 0, ease:Elastic.easeOut, }, 0.05, "-=0.8")
  18. 4 points
    Thanks for the demo, but unless your issue is related to React it's really best not to provide something that complex with multiple files, dependencies, code for components and all that. A simple demo will be just fine and helps us better focus on the issue without getting hung up on all the unnecessary overhead. I tried looking at your demo but it wasn't immediately clear how your verticalHandler function was supposed to be invoked. I didn't see a button for that in the UI or any code that called it. That aside, the following demo should meet your requirements as you described:
  19. 3 points
  20. 3 points
    I thought I might thank the people in this thread for helping me to make this happen. @Rodrigo & @OSUblake
  21. 3 points
    Hi @iLuvGreenSock, Please understand that it is indeed a reduced, but not the CodePen that shows your problem. We always and gladly help - if feasible. If you want to call a function that runs exactly when you want it, then .call () may be a variant - see the docs here tl.call(func, ["param1"]); //appends to the end of the timeline tl.call(func, ["param1"], this, 2); //appends it at exactly 2 seconds into the timeline (absolute position) tl.call(func, ["param1"], this, "+=2"); //appends it 2 seconds after the end (with a gap of 2 seconds) tl.call(func, ["param1"], this, "myLabel"); //places it at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tween is inserted there) tl.call(func, ["param1"], this, "myLabel+=2"); //places it 2 seconds after "myLabel" Happy calling ... Mikel
  22. 3 points
    @iLuvGreenSock, are you saying that you cannot provide a reduced test case that shows it [not] working as you described? It doesn't help much to see a codepen that works perfectly. There must be something else in your code that you're doing differently when it's breaking. We'd love to help, but we just can't troubleshoot blind unfortunately.
  23. 3 points
    I am pretty sure you don't need React for banner ads 😀
  24. 3 points
    You could tween each separately and place them at the same timeline position
  25. 3 points
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up