Jump to content


Popular Content

Showing content with the highest reputation since 05/16/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. 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
  4. 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:
  5. 4 points
    Hi @dwigt, Welcome to the GreenSock Forum. This can be a solution: https://codepen.io/mikeK/pen/dEJNaM Happy tweening ... Mikel
  6. 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.
  7. 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'}); } }
  8. 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
  9. 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!
  10. 4 points
    Hi @Ikai, Thanks. Here two worthwhile articles: tutplus: how-to-intersection-observer Jonathan Harrell: controlling-element-visibility Kind regards Mikel
  11. 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:
  12. 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.
  13. 3 points
    Oddly enough, I think it's actually doing precisely what it's supposed to be doing. Whenever GSAP senses an HSL value, it switches to animate in HSL so that it can keep those values "pure" (if you animate HSL values in an RGB way, it looks very different and is typically undesirable). But of course those animate around the color wheel differently (it's NOT just taking the red, green, and blue and animating those linearly). Again, this is all by design. Here's a demo that shows the HSL values and then their converted RGB counterparts: https://codepen.io/GreenSock/pen/67ccc31471f41af5a36d3a7b9d209a75?editors=0010 (Crack open the console to see). It's using ModifiersPlugin to just intercept things just before they're applied. See what's happening? The HSL values are indeed animating exactly as they should, and then the browser converts them back to RGB which is fine. Again, this is merely a side effect of how HSL values animate compared to RGB. Does that clear things up? If you don't want to animate things in HSL, you could convert them into RGB before feeding them into the tween. This page might be useful: https://css-tricks.com/converting-color-spaces-in-javascript/
  14. 3 points
    Hey Eric, If you console.log(this.card) you will see that it only points to the last element. staggerFrom requires an array of elements. As such, you need to change your React code to refer to an array of elements. I did that by changing 'this.card = null' to 'this.cards = []' and inside of each ref= I changed it to 'this.cards[x]' where x is the counter. There might be a better way of doing this in React, I'm very new to it. Demo here: https://codepen.io/ZachSaucier/pen/pmpqOM?editors=0010
  15. 3 points
    Hey Iamattamai, This seems like it's an issue with the images loading to me, not an issue with GSAP. I'd recommend using a sprite sheet as Blake suggested. If you can't do that from some reason it might help to make sure the images have loaded.
  16. 3 points
    Have you tried not using base64? I would recommend using a sprite sheet for something like that.
  17. 3 points
    Ah, very interesting. Good catch. It looks like those two values are inverted. I can update the next release which you can preview (uncompressed) here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js In the mean time, you could edit the TweenLite.prototype like this: TweenLite.prototype.invalidate = function() { if (this._notifyPluginsOfEnabled) { TweenLite._onPluginEvent("_onDisable", this); } var t = this._time; this._firstPT = this._overwrittenProps = this._startAt = this._onUpdate = null; this._notifyPluginsOfEnabled = this._active = this._lazy = false; this._propLookup = (this._targets) ? [] : {}; com.greensock.core.Animation.prototype.invalidate.call(this); if (this.vars.immediateRender) { this._time = -0.00000001; this.render(t, false, this.vars.lazy !== false); } return this; } Just drop this in once after you load GSAP and it should resolve things. Thanks again for the reduced test case. Very helpful!
  18. 3 points
    Here's a fork: https://codepen.io/GreenSock/pen/56d8637f74c4afdc9fd02829b15682e3?editors=0010 Is that what you were looking for? (well, I tweaked the timing a bit and added a "y" tween just for fun).
  19. 3 points
    Alright. I figured it out. Like I said, I'm new at React (insert embarrassed emoji here). I basically was improperly setting up my emitter in my index file. I should of defined this.emitter in the constructor not as a const outside the class. Thanks, Rick
  20. 3 points
    Hey Rick, I think this is related to the component unmounting. You can read more about the situation in the React docs here. I was able to work around the issue by adding a check for the element being not null in your Box2 like so: dragValueReceived(currentDragPosition) { if(this.box) TweenLite.set(this.box, { y: currentDragPosition }) }
  21. 3 points
    Hi @Ikai, We turned a corner! With a little help from my friends - super @Dipscom. Or with the words of Jim Morrison ... https://codepen.io/mikeK/pen/WBEQLq Happy tweening ... Mikel
  22. 3 points
    Guys it's solved. Thanks to @Dipscom pointing out the reason the boxes were moving because of the relative units in the Tween. I tested it a gazillion times to make sure the boxes did not move out of position and it passed. Thank you @mikel you have been super helpful. Thank you all for your time and effort! https://codepen.io/ikaizen/pen/ZNJzvm
  23. 3 points
    Animating grid-gap is not yet supported. It's on the horizon but hasn't arrived yet.
  24. 3 points
    The boxes are moving out of position because (in Mikel's example) the Tween is set to be relative { y:"-=50" } so, whenever the intersection observer triggers, GSAP will tell the box to move from wherever it is plus another 50 units. Use absolute to stop that. Another thing to consider is to check if the box is already animating before creating the tween. The intersection observer fires when the element is entering the viewport and exiting so, depending on the speed of your scrolling or size of your viewport you might fire the call before the animation is finished. And, remember that you are moving the very same element that you are observing so, if you are observing when it enters or leaves viewport and you move it as it enters or leaves the viewport, there is room for triggering more events than you intend to if the movement brings/removes the element from the view.
  25. 3 points
    Yup! Solves the problem. Thank you for your quick responses.
  26. 3 points
    Aha! I see the problem. GSAP does a ton of work to manage conflicts and ensure that things run smoothly even if you interrupt things mid-tween. One of the things it does in the case of a className tween is to see if there's already one running on that element, and clear things properly (which likely involves editing/reverting inline styles). To work around some browser inconsistencies and ensure that things render properly, it records the element's cssText (all the inline styles) and then after it does its work of applying the new class and analyzing the differences in all the properties, it re-applies that cssText. In your case, that entails background-image too but you've actually got a URL that changes the image supplied randomly! You can get the exact same effect by removing TweenMax altogether and simply doing: //doesn't change anything, but the browser re-loads the background-image if you've got cache disabled: elem.style.cssText = elem.style.cssText; I'll add a line to CSSPlugin that only runs that code if the recorded value is different than the current one. Seems to resolve this edge case. You can preview the next version of GSAP (uncompressed) here with that change in place: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Better?
  27. 3 points
    Chrome did add a built in lazy load for images below the fold of the viewport months ago. I wonder if those new versions is causing a conflict or that buggy re-loading of images. Which would not surprise me based on Chromes track record with not being consistent about features and those features consistent behavior. Based on that lazy load feature in Chrome there have been reports that users with intermittent network connections, images may fail to load when scrolling down the page or trigger a reload. Hopefully they work it out. But you can always submit a bug report to Chrome Developers and see if they can fix your issue. They are pretty good (sometimes) on fixes their bugs. Happy Tweening
  28. 3 points
    Hi @andystent, There's a lot going on in your pen .. and a lot of duplication of work which could be greatly simplified. That said ... consolidating everything (kind of as is) into single calls will make one button press control two sets of tweens. https://codepen.io/sgorneau/pen/mYwOdP?editors=0110 But, you should look at refactoring your code to get rid of unnecessary complexities.
  29. 3 points
    Ikai, look at Mikel's post - That's the answer to your struggle.
  30. 3 points
    Hi, A slightly different approach ... https://codepen.io/mikeK/pen/xNrOyX Happy testing ... Mikel
  31. 3 points
    Hello Ikai, Welcome to (the non-lurking side of) the forums! To me, it sounds like you should just look into the Intersection Observer API - with it you will be able to have each box fire a call to animate itself when it comes into view fairly easily.
  32. 3 points
    I guess i'm a glutton for punishment and I couldn't help playing with this. I found that pins really threw a wrench in things as far as trying to setup triggers for panel scrolling so I separated that part into a separate wheel event. I'm sure there's a way to make it work all in scrollMagic but I"M NOT FIGURING IT OUT!😫 I did figure out what i thought was one kind of cool thing - using a flag variable and onComplete to make the wheel event/Tween self throttling. https://codepen.io/Visual-Q/pen/eaWeLv
  33. 3 points
    Here it is https://codepen.io/jorgeduardo/pen/XwRXgB
  34. 3 points
    Sorry about that, @ronnys - I never thought someone would go past 1000 seconds but I can add a setting in the next version of GSDevTools that allows you to specify a maxDuration in the vars object. I just updated the codepen-only version with that change if you'd like to test it: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js
  35. 3 points
    I'm not familiar with that plugin. Have you tried it in your project? Have you asked in the ScrollMagic forum? (SM is not a GreenSock product) https://github.com/janpaepke/ScrollMagic/issues If you have any GSAP related questions or problems, we're happy to help.
  36. 3 points
    To elaborate on what Mikel is pointing to: You need to be a member of Club GreenSock to use the premium plugins outside CodePen. You can try all that GSAP has to offer in CodePen but you cannot use the premium plugins available in CodePen outside it. It's also worth noting that you are not purchacing anything. You're joining a club, with that you have access to plugins not available to the general public. You won't own the plugins or anything like that if you join the club.
  37. 3 points
    Hi @Usman.face44, Welcome to the GreenSock Forum. Can I try the bonus plugins before I buy? Absolutely! We would love for you to see for yourself how powerful and helpful these tools are. We created a starter template and video to show you how to use fully-functional trial versions of Club GreenSock plugins on CodePen. Best regards Mikel
  38. 3 points
    Hi @Dipscom, Great ... https://codepen.io/mikeK/pen/rgyopq Kind regards Mikel
  39. 3 points
    You're in for a world of pain, I'd say. The kink you have in your concept is that GSAP needs to know the starting path and the ending path. Right out of the bat you will have to figure out a way to create a brand new path right at the start of this scrollEvent that is based on this in-between state path that you are describing. I don't know from the top of my head how to do it and can't really spend the time to research it. The good news is that would be the hardest thing. Once you have this new path you create a new tween to go from it to your path 'c' as the user continues to scroll. What happens next will dictate how much more pain you'll subject yourself to. If nothing else happens once the scroll is done. Fine, you're in the clear. If it needs to animate into another shape, get your logic hat on and plenty of coffee. My suggestion to you is to read on how you can generate a path based on a path. It really could be as simple as duplicating a node. Actually it does sound like that's all you need to do. Hum.... Just pause the looping animation and fire out a new morphing tween with the desired target path. Trigger those events like Craig described above. Proof of concept: https://codepen.io/dipscom/pen/ac616f5a247c7442a883b1ea9a4de9a5?editors=1010
  40. 3 points
    Yeh, why go all bloodthirsty murdering rampage? What has this timeline done to you to deserve such violence?
  41. 3 points
    Today is your lucky day! Codepen: https://codepen.io/CJHSF/pen/3f3fa7adf3ef0fd1c99c225ede953378 Article/Source: https://tympanus.net/codrops/2019/04/10/how-to-create-a-sticky-image-effect-with-three-js/
  42. 2 points
    Hi Mikel Thank you for the warm welome Your example is a perfect example of what I am trying to achieve. Thanks!
  43. 2 points
    Hi @fedehache, I would not take an a tag. Just this code https://codepen.io/mikeK/pen/BeJzPw Happy tweening ... Mikel
  44. 2 points
    Well I was creating a sample an Jack beat me to it. Also a piece on friendly advice. Try to avoid updating the state of any component on events that are triggered a lot like mouse move or scroll. It could create quite a burden in the app since that component re-renders and so it will any child component in it even if they don't re-render because of the state update, Reat still will look and do a shallow comparison to see if something has to be updated. If possible try to set up an event emitter and store the mouse position outside the class, remember that you're working with ES6 modules, which means that you can export the event emitter from the main file (or other file if you want), create the event listener in the new cursor file and emit the event in the parent component, that will be far cheaper in terms of processing than updating the state on every mouse move. If you take a look at this scroll spy library, you'll see that the guy does and stores all the calculations in an object and then compares those values with the ones stored. Once the scroll value exceeds the value of one of those items the state is updated only once: https://github.com/makotot/react-scrollspy/blob/master/src/js/lib/scrollspy.js#L191-L201 Happy Tweening!!!
  45. 2 points
    Hi @Technics1210 I'd recommend just using an inline SVG, but we've had some discussions about injecting the SVG too. Here's a good one: Happy tweening.
  46. 2 points
    Hey Eric and welcome, I recommend using GSAP's .fromTo method like this: this.tl .fromTo(this.moped, 2, { x: '-400', ease: 'Linear.easeNone', }, { x: deviceWidth, ease: 'Linear.easeNone', } ); Then to get it to loop with a delay I'd change the onComplete to something like: this.tl = new TimelineLite({ onComplete: function() { this.delay(2).restart(true); }, }); Which will produce a result like this one! https://codepen.io/ZachSaucier/pen/pmWaQL?editors=0010 FYI, TimelineMax actually has an infinite repeat built in, so what you're trying to do would be even more simple: this.tl = new TimelineMax({ repeat: -1, repeatDelay: 2 });
  47. 2 points
    Welcome to the forums, @mosk. And thanks for being a Club GreenSock member! There are actually a lot of ways to accomplish this. You don't need a loop at all. Here's one way to do it: https://codepen.io/GreenSock/pen/11be77c0a93fbec853c7692a96b19985?editors=0010 The pertinent code: var mySteps = 7, durationPerStep = 1, pixelsPerStep = 200, tl = new TimelineLite(); tl.to("#square", durationPerStep * mySteps, {x:pixelsPerStep*mySteps, ease:SteppedEase.config(mySteps)}) .to("#square", durationPerStep * mySteps, {y:pixelsPerStep*mySteps, ease:SteppedEase.config(mySteps)}, durationPerStep / 2); Does that help?
  48. 2 points
    You might want to start a new post for this as it attached to a very old one. As far as the issue goes it suggests that something is causing the text to change and reflow after document ready which I presume is what you mean by ready. It's generally better to setup animation after window.onload that way all elements should be loaded, also make sure that the splittext script runs after any other scripts that may affect the text or any containers it might be in. Without a working example it's kind of impossible to diagnose further.
  49. 2 points
    Looking at the plugin's promo page it looks like they've made a GUI for setting everything up it but it doesn't appear to offer any information about adding your own code. I would suggest you ask the author of the plugin.
  50. 2 points
    One more link for anyone wanting to try one of the bonus plugins: https://greensock.com/try-plugins
  • Newsletter

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

    Sign Up