Jump to content


Popular Content

Showing content with the highest reputation since 04/23/2019 in all areas

  1. 6 points
    Hi Guys, just here to say hello and thank you. It's two weeks I'm working on a JS project with a lot of GSAP and... I didn't have to ask anything . All I need is in this forum. Merci!
  2. 5 points
    Fact is: GreenSock is a very fast animation tool. See you ... Mikel
  3. 5 points
    My two cent approach: https://codepen.io/PointC/pen/ardXWP Happy tweening.
  4. 5 points
    @helleholmsen, There are a few times in the past where I've shown how to deal with similar speeds over different distances. Maybe these can help, https://codepen.io/sgorneau/pen/grLqYB https://codepen.io/sgorneau/pen/mWEddP I'll try to find others (I wasn't very good at categorizing them 😣 )
  5. 5 points
    Clone and animate it at the beginning, in that case.
  6. 5 points
    Hi Pons, Welcome to the forums! I understand your logic of trying to reduce the fps to improve performance in embedded devices but I don't think changing GSAP's tick frequency will add anything to it. The main thing is that GSAP uses Request Animation Frame for its timming and that is triggered by the browser (or whatever is environment is containing your code). If your environment has a fps of 40, GSAP will run at 40 frames per second, if it has more (as browsers usually do) it will run at such framerate. Moreover, once the tween is done, changing GSAP's fps to 0 will not give you any performance benefit as GSAP is not controlling the actual rate of frame refresh on your device. Does that help?
  7. 5 points
    Put 'em on a timeline and you'll be all set. https://codepen.io/PointC/pen/axxQWv You can use a loop to go through and create a timeline for each group. Here's a basic example. https://codepen.io/PointC/pen/BwEvLO Happy tweening.
  8. 5 points
    Hi Richard and welcome to the GreenSock forums. It seems that this could be solved by using the update() method all Draggable instances have, which is very useful when something outside the realm of the Draggable instance itself, updates it's target. On top of that right now you're updating two different things, that also could be a source of problems. Let's go backwards. First you're updating two different things. On the slides the Draggable instance is set to Scroll Left while the handle Draggable instance updates the slides X position. Those are two completely different things. My advice is to create a consistent update in both cases the handle callback and the property being updated by the Draggable instance that controls the slides. Second, if you're updating the same property that a Draggable instance is affecting, then the recommendation is to use the update method in order to tell that Draggable instance that the value of that specific property has been updated outside the Draggable instance. In that case GSAP updates the value in the Draggable instance and the next time the user drags that updated value will be reflected: https://greensock.com/docs/Utilities/Draggable/update() Unfortunately I don't have enough time to fiddle with your code and try to create a working solution, but hopefully this will help you get started. Happy Tweening!!
  9. 4 points
    Good question. Under the hood staggerFrom (and most if not all selectors in GSAP) use .querySelectorAll when a text selector is given, which returns an array of HTML nodes. That's why the demo works on the documentation page. It turns out that React does let GSAP use that approach as well, which simplifies things a bit: https://codepen.io/ZachSaucier/pen/rgpPMj?editors=0010
  10. 4 points
    No. A window load listener will if the images are in your markup. Another way is to add listeners to all your images and wait for all of them to finish. Not sure how base64 is a design requirement as that has nothing to do with design. And you don't have a single file. You have multiple files, and base64 has a size limit. Loading is one of many benefits. https://www.codeandweb.com/texturepacker An overlap isn't needed. Showing and hiding will happen in the same frame if done correctly. Here are a couple threads about sprite sheet animations:
  11. 4 points
    Hi @dwigt, Welcome to the GreenSock Forum. This can be a solution: https://codepen.io/mikeK/pen/dEJNaM Happy tweening ... Mikel
  12. 4 points
    Cool animations, @Killerwork! The CPU problem is likely caused by the complexity of the SVG and how much work it is for the browser to render all those pixels, especially on Apple devices that have super high-resolution screens. The great thing about SVG is that it's resolution-independent...but that's also the BAD thing about it. The device must fabricate all those pixels dynamically. Some of the toughest things to render in SVG are gradients, clipping paths, and strokes. You've got all of those going on. To be clear, this probably has nothing to do with GSAP. I'd guess that all of GSAP's work accounts for less than 2% of the CPU load. If you need better performance, you may need to switch to <canvas> or swap some of the more complex graphics out for raster (pixel) images. I wish I had a simple setting that'd suddenly cause everything to render silky-smooth on all devices.
  13. 4 points
    Well, you really don't need to use the prototype like that when using classes, and when using classes, it's important to understand how to use arrow functions. class Anthony extends Paul { constructor(data){ super(data); // sets a reference in Pippo this.data.refObj = this; // ref to div this.myDiv = this.data.myDiv; this.content = this.data.content; this.btnlabel = this.data.btnlabel; var p = $('<div>'+ this.content +'</div>'); p.css({'...'}); var bt = $('<div>'+ this.btnlabel +'</div>'); bt.css({ '...' }) bt.click(() => { //And here, Gentlemen, I'd like very much to call... this.showMe() }); this.myHtml = p; this.myHtml.append(bt); this.myFadeTime = 0.6; this.showMe(); } showMe() { // update data in Array //... $(this.myDiv).css('opacity','0'); $(this.myDiv).html(this.myHtml); TweenMax.to(this.myDiv, this.myFadeTime, {opacity:'1'}); } }
  14. 4 points
    If you really wanted to continue to do it using two separate .to calls, you would have to change them to keep the same rate of travel by calculating the animation duration yourself (as far as I know). I'm assuming you want the speed of the second .to below: You know the following information: the distance of the first (400) which I will call d1, the distance of the second (deviceWidth) which I will call d2, and the speed of the second (2 seconds) which I will call t2. Thus you can set up an equation like so: rate = d1 / t1 = d2 / t2. Solving for t1, we get t1 = d1 * (t2 / d2). Filling in what we know, we get the following: this.tl .from(this.moped, 400 * (2 / deviceWidth), { x: '-400', ease: 'Linear.easeNone', }) .to(this.moped, 2, { x: deviceWidth, ease: 'Linear.easeNone', }); Which gives us this demo
  15. 4 points
    Hello Fellow GreenSockers, @GreenSock (Jack) has made a new Learning page. Over the years Jack has "whipped together" various GSAP-related helper functions for community members, so we gathered them into one place for convenience. Enjoy! https://greensock.com/docs/HelperFunctions That's it for now, but we'll keep adding relevant helper functions here as we craft them. Happy Tweening!
  16. 4 points
    Hi @Ikai, Thanks. Here two worthwhile articles: tutplus: how-to-intersection-observer Jonathan Harrell: controlling-element-visibility Kind regards Mikel
  17. 4 points
    I've said it before and I am not ashamed to say it again. I am scared of StackOverflow... You can add a Polyfill to cover the rest of the browsers (erm... IE) that do not support it. It's pretty good from what I have worked with. There are several. Bellow are a couple of discussions I can remember from the top of my head:
  18. 4 points
    Deon, did you see my update on my first response? It turns out there is no need to make a copy of the path, you can tween straight away.
  19. 4 points
    It's what Visual-Q has pointed out: You're creating a bunch of new scenes and timelines and adding them to the ScrollMagic controller. Plus the fact that when you resize the screen and trigger an rebuild of your timeline you're not cleaning up the timelines or the inline style already in the elements. See bellow for a fork of your pen where things seem to work as you expect: https://codepen.io/dipscom/pen/oRBPdb?editors=0010
  20. 4 points
    Hi @mtkramer, Look in the docs: yoyo works only in conjunction with repeat To get back to the starting position, set your repCount(count); to an even number. https://codepen.io/mikeK/pen/pmyWxa Kind regards Mikel
  21. 4 points
    Sweet work @Visual-Q 👍 Looks like this thread is getting pretty clever. I think we have one of these happening.
  22. 4 points
    Very elegant Craig... a thought on how to make it responsive. https://codepen.io/Visual-Q/pen/byEZqK
  23. 4 points
    We can try, but sometimes the community just grabs the wheel at the last second and we're now careening off the topic of GSAP.
  24. 4 points
    I should have said 'we try to keep this focused on the GSAP[...] but there is no law stopping people from jumping in and sorting it out'.
  25. 4 points
    Hi @Thiyagesh, Welcome to the GreenSock Forum. Just add https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js https://codepen.io/mikeK/pen/pmgEqP You need GSAP TweenMax, ScrollMagic and GSAP plugin for ScrollMagic. Since ScrollMagic 2.0 you need to also include animation.gsap.min.js if you want to use GreenSock for the animation. Happy tweening ... Mikel
  26. 4 points
    Definitely avoid #2 because that'd keep appending tweens to a timeline, so they'd stack up and not get released for garbage collection (unless you set autoRemoveChildren to true). Your timeline would keep getting longer and longer. And depending on where the playhead of that timeline is when you append the tweens, they may not happen for a while (because they get added to the end of the timeline by default). All of those things could be controlled, of course, but my point is that it just seems kinda messy. Technically approach #3 is probably the most efficient. However, that bakes in all the tweens from the beginning which is great for performance but not so good if you need things to be dynamic. For example, let's take a simple scenario - you have three buttons that tween a box's color to red, blue, and green. All tweens are 1 second long. What if the user clicks red, then blue, then halfway through that tween they click green? If you dynamically create your animations on-the-fly with each click, it'll work beautifully because a to() tween grabs whatever the current value is and uses it for the "from" value. So if it's halfway between blue and red, and then they click green, it'll be totally smooth. But if you try pre-baking everything, that can't work. See what I mean? I noticed your tweens are all fromTo(), so you're forcing the "from" every time. That may be perfect, but beware that it'll cause a jump if the element is partially tweened when that one fires. Make sense? And again, if you're only putting one tween into a timeline, just use a tween instead. In other words: //NOT AS GOOD: function show1(){ return new TimelineLite().fromTo("div1", 1, {autoAlpha:0}, {autoAlpha:1}); } //BETTER: function show1(){ return TweenMax.fromTo("div1", 1, {autoAlpha:0}, {autoAlpha:1}); } Those tweens can still be added to a master timeline, of course, just like a TimelineLite could. No difference at all. Does that help?
  27. 4 points
    Hi @Konstantin Olshanikov, Welcome to the GreenSock Forum. Scale is a shortcut to control both the scaleX and scaleY properties identically. https://codepen.io/mikeK/pen/qGOqgZ Happy tweening ... Mikel
  28. 4 points
    There are two issues I see: There's a space at the end of each word (otherwise, all the words would collapse) and the browser actually renders that space when everything is wrapped in inline-block <div>'s. When it's just plain/unwrapped text, the browser can be like "oh, I'll ignore that space on the end of the line when it wraps". The solution: tell SplitText to split based on lines too (so in your case, type:"chars,words,lines"). The other issue is purely a Safari thing regarding how it handles kerning. It's trying to be "helpful" by applying all that kerning when certain letters are next to each other, but of course that won't work if they're wrapped in <div>'s. As far as I know, it's simply impossible. And even when I set font-kerning:none, it didn't always solve things. Improved, yes, but I still noticed slight shifting with certain characters. I have researched that and I cannot find any way to tell Safari to knock it off. Sorry
  29. 4 points
    Here's a demo from a different thread, but shows how the rough ease can be used for flicker. Maybe it'll give you some ideas. Happy tweening. https://codepen.io/PointC/pen/LdZZBp
  30. 4 points
    Hey everyone, My forum odometer just hit 3,000 posts so here’s a little commemorative demo. I’m always floating around the forum so here’s a bunch of my avatars floating around and forming an invasion armada. Now you can really get tired of me. This is using the new (5.01) version of Pixi along with GSAP, CustomWiggle and the Pixi plugin. The sprites each randomly wiggle a bit in their own little orbit and there are three containers of sprites that move randomly to create a parallax effect. The middle and back containers have a blur and brightness filter applied to simulate a DOF effect. The container blur is a bit tough on mobile devices, so I’d recommend a laptop/desktop for this one. The parallax effect looks best on full screen. You can also have fun tinting the sprites. If you’re fast enough clicking the color swatches, you can create a multi-color armada. Thanks for letting me hang around for 3,000 posts! Happy tweening all.
  31. 4 points
    Hello @Manikandan Jeyaraman and Welocme to the GreenSock forum! All you have to do is enqueue the GSAP script like @Dipscom advised. Please add the below code to your WordPress themes functions.php. <?php // The proper way to enqueue GSAP script // wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); function theme_gsap_script() { wp_enqueue_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js', array(), false, true ); wp_enqueue_script( 'gsap-js', get_template_directory_uri() . '/js/custom-gsap-scripts.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); ?> Resource: WordPress Codex for enqueuing JS files: http://codex.wordpress.org/Function_Reference/wp_enqueue_script Happy Tweening
  32. 4 points
    Hi @Chris Prieto, Welcome to the forum and thanks for joining Club GreenSock. I'm troubleshooting a bit blind here, but I see a couple things. 1. The <li> is $(this) so I think you meant to do this // switch this servicePSplit = $(this).find('.services-wrap li p') // to this servicePSplit = $(this).find('p') The other thing I don't know is how many <p> elements (or other elements) are part of the <li> that would be the children. I'm guessing the <p> is the only one? If so, tweening children[2], [3] etc won't work since element.children[0] is the only one that exists. This is just a guess though since I can't see your DOM. If you could make a demo and describe the desired behavior, we could offer more detailed assistance. More info: Hopefully that helps. Happy tweening and welcome aboard.
  33. 4 points
    I can't spend too much time on this but my first suggestion is for you to the following: 1) Have separate pens for your two animations: One the bouncing animation you want to do, the other the bulb making progress. So you can be sure the animation is working as you desire. 2) Try and have a read at ScrollMagic's examples to get a better understanding of it and how to work with timelines, as is, you seem to be overcomplicating things a bit too much. 3) Only then, try and connect the animations with the scrollMagic. Here's a super quick fork of your example (thank you for the pen, it really helps us to help you). https://codepen.io/dipscom/pen/EzYxpr?editors=0010 Also, have a look at the changes I made to your HTML and CSS, it's subtle but helpful.
  34. 4 points
    As you're not at a master level yet, you can't commit hara-kiri. You can only chop off a toe.
  35. 4 points
    Yes, see bellow. https://codepen.io/dipscom/pen/749b1bbbb157f1c86e6a6ccc7fcc06b6?editors=0011 Do bear in mind, you are only changing how frequent GSAP fires its tick call, it will have no effect on anything else beyond GSAP. Here's a challenge for you: Can you see what I have done differently from you? If yes, why did your code fail?
  36. 4 points
    Hello @oligsap and Welcome to the GreenSock forum! When the Google bot scans your page for the first time, it reads the source text of the HTML document. So it will read the <h1> text before the JavaScript has generated the new HTML <h1> markup. You can also test your web page using Google web tools like Google PageSpeed Insights and Google Webmaster Tools. Hope that helps
  37. 4 points
    Yeah, that's my fault. I copied and pasted something you had commented out without paying attention to the actual tween vars. I was just focused on the position parameter. My solution and @Dipscom's solution are doing the same thing. He's adding two tweens to each nested timeline and having them both start at a position parameter of 0. The nested timelines are then played in sequence. My solution just adds all the tweens to the main timeline but each pair has the same label so they play at the same time. Make sense? Happy tweening.
  38. 4 points
    It's a remnant from the old ActionScript API. We've simplified things quite a bit since then, and the add() method is much easier. We silently supported insertMultiple() and some of the other legacy methods just for backward compatibility. But I wouldn't recommend using them. @mirohristov glad to hear you're enjoying the tools! Good luck with the project. Let us know if you need anything else. Oh, and I'd highly recommend this article because it can revolutionize your animation workflow: https://css-tricks.com/writing-smarter-animation-code/ (Code/Demos from @PointC are featured there). And I "whipped together" a plugin that might make working with Three.js easier - it's in this thread: Happy tweening!
  39. 4 points
    It is not that TweenMax doesn't allow you to tween more than one property at once in the same Three.js object it's the fact that the properties in Three are individual objects themselves, GSAP doesn't know they are related to the same parent entity, it only sees them as they are, individual objects. I have never heard of insertMultiple(array) is that even a GSAP method? Where did you find it? To me, it appears that your animation gets jittery after the first play because you have a bunch of Tweens running at the same time, somehow, inside the timeline but that are not children of the timeline. However, if you were to create a mini-timeline for each of the sections you want to animate the position and rotation together and then, add that to the master timeline, you will see that the animation plays normally and repeats normally. You can even, instead of using a onComplete call, just use the repeat property from TimelineMax. for (var i = 1; i < miroKeyframes.length ; i++) { var keyframe = miroKeyframes[i]; //current keyframe var dur = keyframe.t - miroKeyframes[i-1].t ; //auto-duration var tl2 = new TimelineMax(); tl2.to( obj.rotation, dur, { x:keyframe.r.x, y:keyframe.r.y, z:keyframe.r.z, ease:Sine.easeIn}, 0 ); tl2.to( obj.position, dur, { x:keyframe.p.x*20, y:keyframe.p.y*20, ease:Sine.easeIn}, 0); tl.add(tl2); }
  40. 4 points
    I haven't used it, but isn't that what https://github.com/googlearchive/flipjs does? There are instructions there for using it with GSAP. Per your request, though, I whipped together a flip() helper function that might be more of what you're looking for. Here's a simple codepen that takes 7 <div> elements and re-parents them into a different container (right half of screen), then animates them there using FLIP. https://codepen.io/GreenSock/pen/BEELej?editors=0010 Here's the function: /* This is the function that does all the magic. Copy this to your project. Pass in the elements (selector text or NodeList or array), then a function/callback that actually makes your DOM changes, and optionally a vars object that contains any of the following properties to customize the transition: - duration [Number] - duration (in seconds) of each animation - stagger [Number | Object | Function] - amount to stagger the starting time of each animation. You may use advanceds staggers too (see https://codepen.io/GreenSock/pen/jdawKx) - ease [Ease] - controls the easing of the animation. Like Power2.easeInOut, or Elastic.easeOut, etc. - onComplete [Function] - a callback function that should be called when all the animation has completed. - delay [Number] - time (in seconds) that should elapse before any of the animations begin. This function will return a TimelineLite containing all the animations. */ function flip(elements, changeFunc, vars) { if (typeof(elements) === "string") { elements = document.querySelectorAll(elements); } vars = vars || {}; var bounds = [], tl = new TimelineLite({onComplete:vars.onComplete, delay:vars.delay || 0}), duration = vars.duration || 1, copy = {cycle:vars.cycle || {}}, i, b, p; for (i = 0; i < elements.length; i++) { bounds[i] = elements[i].getBoundingClientRect(); } changeFunc(); for (p in vars) { if (p !== "duration" && p !== "onComplete" && p !== "delay") { copy[p] = vars[p]; } } copy.cycle.x = function(i, element) { return "-=" + (element.getBoundingClientRect().left - bounds[i].left); }; copy.cycle.y = function(i, element) { return "-=" + (element.getBoundingClientRect().top - bounds[i].top); } tl.staggerFrom(elements, vars.duration || 1, copy); return tl; } Is that what you were looking for?
  41. 4 points
    Glad you got it working, but the blended ease isn't as complicated as it may look in that demo: //just feed in the starting ease and the ending ease (and optionally an ease to do the blending), and it'll return a new Ease that's...blended! function blendEases(startEase, endEase, blender) { blender = blender || Power4.easeInOut; return new Ease(function(v) { var b = blender.getRatio(v); return startEase.getRatio(v) * (1 - b) + endEase.getRatio(v) * b; }); } TweenMax.to("#target", 2, {x:100, ease:blendEases(Back.easeIn.config(1.2), Bounce.easeOut)}); I created that "blendEases()" function for you that should make it super simple. Does that help?
  42. 4 points
    Hi and welcome to the GreenSock forums. The CDN links are working for me. Perhaps the issue is the order the tags are placed. Remember to put the tag with the href to your code after the tags with the CDN links. If your code is in a file called myScript.js, then you should add the tag for that after the GSAP files and for that matter after every other library or framework you use in your site: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <!-- NOW ADD YOUR FILE --> <script src="js/myScript.js"></script> Happy Tweening!!!!
  43. 4 points
    Hi @DigitalCardinal, Welcome to the GreenSock Forum. Tween the progress of a paused timeline with the scroll progress - like this: https://codepen.io/mikeK/pen/oOmyOZ Or use ScrollMagic. It depends on your concept / layout. Happy tweening ... Mikel
  44. 4 points
    Hi @Arianna Wie wäre es mit GreenSock SplitText ??? https://codepen.io/mikeK/pen/zXMXeg Happy splitting and tweening ... Mikel
  45. 4 points
    Well, I won't say that every jQuery method returns the jQuery instance, because I could be wrong, but is for chaining purposes. In this case you're basically selecting the slider element and assigning a width based on the calculations you made previously on your code. What's odd is that you didn't thought about doing the same you're already doing with the handle, that is use a set() instance to set the width of the slider element: TweenLite.set(slider, { width: boxWidth * sections }); That seems to work OK in the codepen sample. This hopefully will help you get a better understanding of the different widths and heights of an HTML element object: https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively Happy Tweening!!!
  46. 4 points
    The one circled is not like the others. TweenMax.stagger To() does not use a position parameter. Id suggest using the timeline stagger methods instead of using add() with a TweenMax.staggerTo(). Much easier to to read and type.
  47. 4 points
    Hi @Arianna, Welcome to the GreenSock Forum. As a little Easter egg, here is this version https://codepen.io/mikeK/pen/gydBYB Happy tweening ... Mikel
  48. 3 points
    Hi @Dipscom, Great ... https://codepen.io/mikeK/pen/rgyopq Kind regards Mikel
  49. 3 points
    Since you're using jQuery, you can check the scroll value of the window element or any element you're using as a main wrapper for the site. This is an extremely simple example of using that particular way to update the progress of a GSAP instance: https://codepen.io/rhernando/pen/RNpBYx Happy Tweening!!
  50. 3 points
    If you need tons of snow, you can also check out Pixi.js. Blake's demo here animates 12,000 snowflakes. https://codepen.io/osublake/pen/BjNZYP Happy tweening.
  • Newsletter

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

    Sign Up