Jump to content


Popular Content

Showing content with the highest reputation since 07/09/2019 in all areas

  1. 7 points
    Wow! I just noticed the GSAP forum cracked 10,000 topics. I just wanted to take a moment to thank Jack for not only creating a fantastic set of animation tools, but also for fostering such a great community. I’ve said it before, and I’ll say it again — this forum really is an oasis in the snarky Interwebs desert. A friendly community with loads of great people and tons of info and demos. Truly one of a kind. A message for any lurkers — try jumping in and asking (or answering) a question. I think you’ll be glad you did. Congratulations Jack. Looking forward to GSAP 3.0 and the next 10,000 topics.
  2. 7 points
    Hi @Demky Welcome to the GSAP forums! The issue you're seeing is because all of your Tweens are trying to run at the same time (using TweenMax). From what I see you'd be best using a Timeline (Max or Lite): see docs here: https://greensock.com/docs/TimelineLite var tl = new TimelineMax({paused: true}); tl .to("#whiteCube", 2, {rotation:360}) .to("#whiteCube", 2, {rotation:1440}) .to("#whiteCube", 2, {rotation:1800}); $('#whiteCube').on('click', function(){ tl.play(0); }); You'll want to note that the rotation values are all relative to 0 (not current rotation), so that's why I'm ending on 1080deg (1800 - 1440 = 360). Alternatively, you could set it to make the rotation add x degrees to the current value (by setting a var for current rotation and adding to that, etc).
  3. 6 points
    Using var isn't going to break the internet, but using let or const might. You don't want to be like this guy, now do you? Well, only on older browsers, but I get why they would teach you to use let or const. I use let/const on real projects, but I use var on these forums because a lot of people don't understand let/const yet.
  4. 6 points
    No, I think you're stuck with using the body/html for now. That also causes problems on mobile with the URL bar showing and hiding. That's why I'd really like for that smooth scrolling thread to die. It's just way too problematic, and coming up with acceptable workarounds would take too much of my time. One bit of good news is that Chrome/Android has a solution for selecting which element is the root scroller. https://www.chromestatus.com/features/5162094739587072 https://github.com/bokand/root-scroller/blob/master/explainer.md Please let Apple know that you'd like have that feature.
  5. 6 points
    I have to ask about this. Cont = { val: 0000000000 }; Are you expecting the output to contain all those 0s, kind of like this? 0000000000 0000000001 0000000002 0000000003 ... 1710007692 If so, that won't work for several reasons. First, 0000000000 will evaluate to 0, so 0 will be the starting number. Second, numbers that start with 0s might be parsed as an octal, so a number like 0000000021 will become 17. See this article for more information. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates To get it to output in a format prefixed with 0s, you will need to convert it to a string and pad it. You can do this with a string's padStart method. There's also a polyfill for older browsers. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart But first, I would first store your counter element in a variable so you don't keep searching for it. var counter = document.getElementById("counter"); And then change the onUpdate callback to this. TweenLite.fromTo(Cont, 500, { val: 0 }, { val: NewVal, roundProps: "val", onUpdate: function() { counter.innerHTML = (Cont.val + "").padStart(10, "0") }, autoAlpha: 0, delay: 0.1 });
  6. 6 points
    Hello and welcome to the forums! There are a few things that I'd change about your approach if I were doing it. The first thing that sticks out is your repeating of the long list of .from() animations on keyup and keypress. I'd make a function that I then call it from those event listeners. The second thing is that it seems like you just want the animations to play when the form is submitted. The way you're attempting to do that is through listening to the button click and the keys in the form. Why not just listen to one event - the form submission - instead? Vanilla JS and jQuery have methods to listen for that. In your demo I had to move the submit button within the form to get the click to submit it without extra JS. Thirdly it seems that you aren't changing anything about the long list of .from() animations when you call it, so I'd create the full animation timeline before you call it at all. That way you don't have to rebuild it every time and worry about it overlapping each other. In order to get the countdown (countup?) to work using .to() you need to reset the variable to its initial state. You could do that by simply declaring the following inside of your animation function: Cont = { val: 0000000000 }; Otherwise you could use GSAP's fromTo method instead of the .to() like so: TweenLite.fromTo(Cont, 5, { val: 0 }, { val: NewVal, roundProps: "val", onUpdate: function() { document.getElementById("counter").innerHTML = Cont.val }, autoAlpha: 0, delay: 0.1 }); Altogether that would look something like this: https://codepen.io/GreenSock/pen/jjdXOg?editors=0010 Happy tweening!
  7. 5 points
    Hi @Demky, Please look at this page: https://greensock.com/docs/TimelineMax/reversed() .reversed( value:Boolean ) : Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards. myAnimation.reversed( true ); //sets the orientation to reversed myAnimation.reversed( !myAnimation.reversed() ); //toggles the orientation Happy tweening ... Mikel
  8. 5 points
    You need to save a reference to your tween outside of a function. It's as simple as this: var myAnimation = TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true }); If you need it to to be created by a function, you must return the tween. function loopedTweenMax(){ return TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true }); } var myAnimation = loopedTweenMax(); Now you can control "myAnimation" inside of other functions. Notice how I removed your onComplete. Just use repeat: -1 to repeat infinitely. https://codepen.io/osublake/pen/ZdgBYg
  9. 5 points
    Hello Nexal and welcome. As SARFEX commented, this can be done using cookies or localstorage (I'd not recommend using IndexedDB for something this simple). I'd search for something like "js tell if user has visited page before" to find more information about how to do so. Basic approach: Check to see if a specific cookie or localstorage exists. If it does, don't animate. If it doesn't exist, animate whatever you want to animate and create the cookie/localstorage that you're looking for. Let us know if you run into any issues, especially related to the GSAP part of your code!
  10. 5 points
    Getting rid of transforms depends on your software. For most, you can usually ungroup and group your paths. https://stackoverflow.com/q/13329125/2760155 It's best to let GSAP handle anything transform related. I would forget about using the AttrPlugin for now. It has it uses, but usually not for moving stuff. So this will move it forward 50. logoAnimation.to('#Path_23', 4, { x: "+=50"}); Or back 50. logoAnimation.to('#Path_23', 4, { x: "-=50"});
  11. 5 points
    Hello @Goldendust20 and Welcome to the GreenSock Forum! I'm not seeing that "glitch" on Firefox and Chrome Windows 10. But if it was me I would convert your jQuery css() to the GSAP set() equivalent. So this way GSAP can keep track of what changes your doing outside itself: // So convert this jQuery css(): $list.add($clonedList).css({ "width" : listWidth + "px" }); // To this using GSAP set(): TweenLite.set([$list, $clonedList],{ "width" : listWidth + "px" }); Notice how i added multiple CSS selectors within the square brackets [ ] for the target parameter of the set method? GSAP set() : https://greensock.com/docs/TweenLite/static.set() Happy Tweening!
  12. 5 points
    I think this might be similar to your demo. And @ZachSaucier did something similar here. I don't think using a tween/timeline is the best approach for doing this. You need something a little more dynamic, like this: https://tympanus.net/codrops/2019/07/10/how-to-add-smooth-scrolling-with-inner-image-animations-to-a-web-page/ They are using linear interpolation (lerp) to do the smooth scrolling. It's just a really simple calculation. I just noticed that article mentions Jesper Landberg. https://codepen.io/ReGGae/ He is no stranger to these forums. I wonder if that is where he learned about lerp .
  13. 5 points
    See the STARS acronym here. Your order is wrong, and you should use translate instead of drawing something at an xy coord. var originX = this.width / 2; var originY = this.height / 2; creative.ctx.save(); creative.ctx.translate(this.x + originX, this.y + originY); creative.ctx.scale(this.scaleX, this.scaleY); creative.ctx.translate(-originX, -originY); creative.ctx.fillStyle = this.fill; creative.ctx.fillRect(0, 0, this.width, this.height); creative.ctx.restore(); And more particle stuff.
  14. 5 points
    In addition to @elegantseagulls excellent advice, I'd add another approach to this type of animation is tweening the progress(). You create a tween or timeline with all your rotations and other properties that will animate in a paused state. Then tween the progress of that animation and add any in/out eases you like. In this case the actual timeline or tween with the animation should use a Linear.easeNone so it won't look odd. https://codepen.io/PointC/pen/gNyXEx Just my two cents and another idea for you. Hopefully it helps. Happy tweening.
  15. 5 points
    One recent post on here about something similar/related is this post: If you want it to trigger on scroll you could look at @PointC's new post on using GSAP with ScrollMagic (but it's not necessary to use ScrollMagic to do this - in fact GSAP may have its own way of doing it soon ). Maybe the guys who have been around the forums longer have other similar examples. If you threw together a demo of something you're wanting to create the guys here are often eager to help out
  16. 5 points
    Hello! There's still some of us around, trying to make a living. From what I've seen, and as @leolo69 has alluded to is that production budgets for display banners has dramatically been cut. A few years ago I was at a DoubleClick event where we talked about budgets, and 85% went to media, and only 15% for creative and production, my current estimates puts that figure at 6%. This leaves a lot of work being out sourced to cheaper labour markets. (I may or may not have had a hand in this, I hear a lot of cheap production houses are using Bannertime to scale up. Oops) I've seen more traction with dynamic banners, or data-driven creatives, with programmatic being the buzz word for the media side for a while now, clients are more interested in the cost savings that can be had by developing a set of banners once, and re-using them for several seasons. That being said there's always those gem contracts where there is loads of budget and a real desire to get creative! They're few and far between these days but here's hoping the market will shift back to creative! EDIT: I also haven't done a decent interactive/rich-media creative in ages!
  17. 5 points
    SEO would be affected if your using the CSS property display: none, visibility: hidden or even high negative or positive text-indent on your H1 or main content. But having elements use opacity will only hurt your SEO with a very important exception. As long as your not using display: none, visibility: hidden, or a high text-indent value on your main content, then I wouldn't worry about it. Just be careful when using opacity, display: none, or visibility: hidden... to hide the important main content with your main search keywords and H1 tag. So be mindful that you could get lower ranking when its your main keyword content! Since first Google will parse the HTML, and then will parse the rendering of it with the CSS and JS. But you can always use Google PageSpeed Insights if you really need to test your webpage to see if Google reports that it doesn't like a specific thing your doing as far as hiding content. https://developers.google.com/speed/pagespeed/insights/ Happy Tweening!
  18. 5 points
    Hi @JackyWang, Welcome to the GreenSock Forum. Interestingly case ... https://codepen.io/mikeK/pen/rEQRYL Happy tweening ... Mikel
  19. 5 points
    Hi @distrox, Welcome to the GreenSock Forum. .play(): Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is). So try .play (0) or .restart() https://codepen.io/mikeK/pen/jjQerz You could use this QuickTip also. Happy tweening ... Mikel
  20. 4 points
    PS Here's another option. https://codepen.io/PointC/pen/WqKyye Happy tweening.
  21. 4 points
    Thanks to all of the incredibly helpful moderators and other regulars to these forums! We literally could not do this amount of forum help without you, especially not with as much excellence and creativity as we see from you guys. Keep up the great work!
  22. 4 points
    Wow, thanks for pointing that out Craig! And we're at over 93,000 total posts, so another milestone is approaching. Pretty cool indeed! I'm super proud of the tone that all the moderators set here. It's truly a unique place on the web, so my hat's off to all the participants. And yes, to the lurkers - dive in, the water is nice and warm. PS: GSAP 3.0 is shaping up very nicely. When released, I'm sure these forums will be even more active
  23. 4 points
    swampthang is probably the best person to ask about this type of stuff. https://greensock.com/forums/profile/17360-swampthang/ I believe he converts his animations to png, one frame at a time, and then uses ffmpeg to combine everything into a movie.
  24. 4 points
    Hi @Rodrigo, Do you need ScrollMagic for your list? Happy scrolling ... Mikel
  25. 4 points
    Hi @haukeg, Sorry. My mistake. I answered too fast. Please try .invalidate () https://codepen.io/mikeK/pen/MMRRvN?editors=1010 Happy tweening ... Mikel
  26. 4 points
    It might not fire if everything has been cached. if (document.readyState === "interactive" || document.readyState === "complete") { onReady(); } else { window.addEventListener("DOMContentLoaded", onReady); } function onReady() { // ready code } But why are you listening for that event? I'm not saying it's a bad idea, but it might not be necessary. The DOMContentLoaded event is like jQuery's ready method, which is needed because some people put their scripts inside the <head> tag. I only listen for the window load event when I need to make sure my images are loaded, like when I'm working with canvas.
  27. 4 points
    Hi, you can create the split text as a property in the component's class, in the constructor: constructor (props) { super(props); this.title = null; this.titleChars = null; } Here this.title should point to a ref in the render method Then in the component did mount method you can create the SplitText instance and assign the chars to the property created in the constructor: componentDidMount () { const mySplit = new SplitText(this.title, { type: "words, chars", position: "absolute" }); this.titleChars = mySplit.chars; // array of DOM elements (<div> tags) TweenMax.staggerTo(this.titleChars, 1, {x: 10, y:-10, rotation: 180, autoAlpha: 0}, 0.1); } That is working for me, give it a try and let us know how it works. Happy tweening!!
  28. 4 points
  29. 4 points
    There are a lot of ways to switch the direction of the timeline on click. Usually you'll just do something like this in your click handler: tl.reversed() ? tl.play() : tl.reverse(); That will see which way the timeline is going and flip it. That being said, it also depends on whether you're allowing a click before the animation is finished. In those cases you can check it with the isActive() method. https://greensock.com/docs/TimelineMax/isActive() Because I'm a rebel and play by my own rules. Nah, just a habit. var works just fine for these little demos.
  30. 4 points
    A few quick comments: Be careful about will-change. https://greensock.com/will-change The invalid morphSVG tween error means you forgot to load MorphSVGPlugin You can try setting CSSPlugin.defaultForce3D to true or false to see if one of those helps (default is "auto").
  31. 4 points
    Sure you can. But you need to be able to select it somehow. Why don't you try editing the demo to reproduce whatever you're imagining and then posting that demo here so that we can give you feedback?
  32. 4 points
    Hi @iloveaphextwin, Another option using a <span> (found here) https://codepen.io/mikeK/pen/NZJRQG Happy spacing ... Mikel
  33. 4 points
    My demo shows that the browser is collapsing your white space. The text inside the copy_2 div isn't being split apart by GSAP. If you want spaces, then use &nbsp; https://codepen.io/osublake/pen/OeqXaZ
  34. 4 points
    What kind of timeline are you trying to do? Like an interactive one, or one you just scroll through? I think GreenSock's Twitter is a good place for inspiration. https://twitter.com/greensock That's pretty easy to do with a standard timeline. Just replace time/duration values with pixel values, listen for scroll events, and BOOM! You now have MagicScroll ™. https://codepen.io/osublake/pen/bOGMaG
  35. 4 points
    You wouldn't want to animate to different percentages. You'd want to animate each box to yPercent: -100. You'll also want to set the parent pinned element to overflow:hidden. https://codepen.io/PointC/pen/xoMJZx Just FYI — ScrollMagic is not a GreenSock product, but works well with GSAP. I wrote a post about that here: https://greensock.com/scrollmagic Happy tweening.
  36. 3 points
    I figured it out! By using the `eventCallback` I could toggle the home menu after the reverse was completed. If anyone is wondering exactly how I did this, here's a codesandbox: https://codesandbox.io/embed/gsap-fix-using-eventcallback-ir40h
  37. 3 points
    Yeah, all the info is in the docs, but you're right. Some things are not immediately obvious when you go to set up a real world project. The best advice I can give is to start with the learning section: https://greensock.com/learning After that you can learn a ton by reading through all the threads here on the forum. Maybe pick a section of the docs to read through each week too. Visiting CodePen and looking for GSAP based pens is always a great way to learn. Find something you like, fork it and then tear it down line by line until you understand what's happening. We're always here if you need any GSAP related assistance. Providing a concise demo (as you did already 👍) is the best way to get answers to your problems/questions. Happy tweening.
  38. 3 points
    PS I don't know anything about Adobe XD or how it exports assets, but I wrote a little bit about Adobe Illustrator exports here: Maybe it'll help. Happy tweening.
  39. 3 points
    You can use cookies! 🍪🍪🍪 or localstorage // or IndexedDB maybe
  40. 3 points
    We all know @OSUblake wants to optimize and blake-ify that snippet, but fears doing so will cause this thread to also get added to the list of threads causing him perpetual anguish. :--)
  41. 3 points
    I don't have time to analyze things in-depth, but I did notice that you just nested the "autoKill" incorrectly: //BAD: .to(window, 1, {scrollTo:".footer", autoKill:false, ease: Power0.easeNone}) //GOOD: .to(window, 1, {scrollTo:{y:".footer", autoKill:false}, ease: Power0.easeNone}) It's fine to pass a string like that directly to scrollTo, but if you're defining more values that are scrollTo-specific (in this case "autoKill"), you need to use the object syntax. I suspect this is what was causing the dragging of the scrollbar to kill functionality (doing so killed the tween).
  42. 3 points
    Is this what you need? https://codepen.io/PointC/pen/Wqmmod Just FYI — ScrollMagic is not a GreenSock product, but the article @ZachSaucier mentioned has a lot of demos showing how to use GSAP and ScrollMagic together. Happy tweening.
  43. 3 points
    Maybe this will help. It has drag, nav dot, arrow and mousewheel controls. No jQuery involved. https://codepen.io/PointC/pen/MzWzyv Happy tweening.
  44. 3 points
    Hello @Nexal and Welcome to the GreenSock Forum! When you say: Do you mean the CSS animations that are on your page in the HTML panel. I see a style attribute with a ton of CSS animations. Its always best not to animate elements with GSAP if their children or parent elements have any CSS animations or CSS transitions on them. Otherwise you will have rendering issues due to the fighting of the two. Also what elements (id or class) are you referring to, you have a lot going on in that example? I am also seeing an error get thrown in the console. I notice terzafrase is an id selector not a class selector like you have in your code. invalid morphSVG tween value: .terzafrase
  45. 3 points
    At the moment I can't think of any recent demos or threads about that. Maybe look around codepen for stuff like "company history" or "animated calendars" etc... The things you find may not be built with GSAP, but maybe they'll give you some ideas. If you find something built with CSS keyframes we'll show you how to throw those out and animate it properly with GSAP. Happy tweening.
  46. 3 points
    See if this works. import { PixiPlugin } from 'gsap/PixiPlugin'; declare var PixiPlugin: any; const plugins = [PixiPlugin]; PixiPlugin.registerPIXI(PIXI); I honestly don't why that would make a difference unless WebPack has changed, or maybe your config is a little different. Can you send me a simplified version of your project? I'm curious to see why it's being dropped.
  47. 3 points
  48. 3 points
    @Snoop .. I don't mind taking a crack at it in IE11. I was late to the party and you might as well have it work in IE11, since it's the highest version of Internet explorer on Windows 7. And as much as I hate and despise IE11, its not a dead horse until January 14, 2020. So lets give that IE11 horse, one last ride into the sunset and see that codepen demo. But that wobble your seeing right at the end of your text animation, sounds like the rendering layer being removed after its transitioned. You could be missing some CSS transform properties that IE11 requires to render CSS transforms correctly after transitioning, especially for web font text. Its an old horse so some times you need some hay. 🐴 You could make a limited codepen demo example so we can test it in IE11 to see if its a bug in IE11 or missing CSS properties to stop anti-aliasing mumbo jumbo. Happy Tweening!
  49. 3 points
    I think this thread can help you: Happy tweening.
  50. 3 points
    Hi @DTales That should be in your minified or uncompressed directory in the 'utils' folder. It's not under plugins. Does that help? Happy tweening
  • Newsletter

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