Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

  1. OSUblake

    OSUblake

    Moderators


    • Points

      2,332

    • Content Count

      5,062


  2. GreenSock

    GreenSock

    Administrators


    • Points

      2,101

    • Content Count

      13,861


  3. PointC

    PointC

    Moderators


    • Points

      1,931

    • Content Count

      3,467


  4. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      1,581

    • Content Count

      1,523



Popular Content

Showing content with the highest reputation since 01/20/2019 in all areas

  1. 11 points
    Hello everyone, This post is going to be one of those a little long and for those more busy and timeless it is about: A person who had a dream and when he reached resolve to thank the people who helped reach that goal. Well let's go then: First, this was my first post on the forum: https://greensock.com/forums/topic/16437-animation-scale-left-to-right/ And on this date I still used Adobe Muse to make a website because I did not know anything about HTML / CSS, but I already wanted to be good, make sites cool, cool and one day I could gain recognition at Awwwards, so if you go see this post will see that mention a site that had just won this recognition. But it was impossible to win not knowing HTML and CSS, so I started to study and learned everything by scouring the internet inside, but something I was sure, to get there I would need to master doing Animations, so every day I needed to understand how it worked the GSAP. I was studying and creating new challenges and whenever I tried to do something and did not find the solution on the Internet, I was obliged to ask in this Forum, and at no time did I leave here without a useful answer, ready for me was very clear, I had found a source for learning and for evolution. So know that this is how I and many people see this forum. So after less than 2 years of many studies and many questions I finally decided to run my dream that was to gain a recognition at Awwwards, and to my surprise I did not only won as a Site of the Day but also the Developer award. A reason for much satisfaction and pride, and I certainly could not without the support, help of this incredible community, who always welcomes and helps everyone who comes here to seek a light for their goal. So thank you to all of you and as a form of gratitude and recognition I made a point of mentioning in the thanksgiving session of my website (http://victor.work) on the page about, because it is also conquest of you. (and also mentioned GSAP FORUM in my hobbies) So through all this I would like to let you know that you provide a very important role for the web community, a tool that we can evaluate as perfect and yet I see you doing the best and working hard to perfect it even more. Guys you are very importants. I'll leave the recognition link here at Awwwards: https://www.awwwards.com/sites/victor-work-folio19 Anyway, this is it: Thank you very much indeed, you guys are awesome.
  2. 7 points
    Might want to check someone’s history, skill set, and experience before you accuse them of trolling.
  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
    Hi @intelligence, Welcome to the GreenSock Forum. https://codepen.io/mikeK/pen/oRazzE Convinced? Happy tweening ... Mikel
  5. 5 points
    Hey @Page Tailoring, Just do it ... https://codepen.io/mikeK/pen/WNNLbLZ Happy tweening ... Mikel
  6. 5 points
    You're welcome! As for ongoing questions ... if they're pretty much related to the title of this post, then following up here is just fine. If it's a new topic altogether, it would be best to create new post with a title relevant to the question at hand. That keeps threads shorter and entirely relevant. That said, feel free to ask as many questions as you like! Someone is sure to jump in and offer help or advice. As far as ScrollMagic .. you may get some pointers, but that is not a GSAP product, so you may not get an answer specific to your issue (if you have one). Happy tweening!
  7. 5 points
    That sounds pretty complicated because the scroll speed of the user isn't predictable. And a scroll event might fire every 16ms (it might be much faster than that with touch), so a lot of what's on the screen can change during those intervals. You would be adding animations to a queue for elements that might be out of view on the next tick, which would be delaying animations that do need to play. To trigger animations when they are in the viewport, I've been using the Intersection Obsever API. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API This demo is set up to animate elements by the row: https://codepen.io/osublake/pen/6fd214ecd74e7091ec7b609bb0270f97
  8. 5 points
    Have you tried using the Draggable instance's pointerX and pointerY values? That's one of the ways it smooths out cross-browser differences. And to be clear, the docs don't indicate that the event will always have pageX/pageY values - it has no control over that. It simply passes along whatever it gets from the browser.
  9. 5 points
    Hey @lzy100p, Maybe you try the AttrPlugin: https://codepen.io/mikeK/pen/QXXNJj Happy tweening ... Mikel
  10. 5 points
    Just to add (ha) to Zach's excellent advice. You'll often use the .add() method to add a label or a function (without parameters) to the timeline. The biggest use, at least for me, is building a master timeline and adding nested timelines to the master. Check out this great article for all the details. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.
  11. 5 points
    Hey @lzy100p, Clip-path is not a feature that all browsers support (that has nothing to do with GSAP): https://caniuse.com/#feat=css-clip-path Kind regards Mikel
  12. 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
  13. 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!
  14. 5 points
    Hi @JackyWang, Welcome to the GreenSock Forum. Interestingly case ... https://codepen.io/mikeK/pen/rEQRYL Happy tweening ... Mikel
  15. 5 points
    Please understand that we ask for a demo so we can see what you're doing. Even what is seemingly a basic question will get a better answer with a demo. You originally asked about a <circle> following a <line>. I didn't understand why you needed the Morph plugin to do that and that would have been my follow up answer once we saw your demo. We also didn't know if you were hand coding the SVG or exporting it from your vector software. As it turns out, you wanted the <circle> to follow a <path> and that makes sense that you would use the pathDataToBezier() method for that animation. It's all about context and we want to get you the best information and solution possible. Regarding your <path> direction problem: Quick tip: when you create your path, place a temporary arrowhead on the beginning of it via the stroke panel in your vector software. If the direction is incorrect, you can easily reverse it. In Adobe Illustrator you do that by the menu Object --> Path --> Reverse Path Direction. Once it's going in the desired direction, simply remove the arrowhead and export. Hopefully that helps. Happy tweening.
  16. 5 points
    Didn't you have a similar issue? Learn to use arrow functions. Very important if you want to keep your code to a minimum. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions You're mixing a bunch of stuff up. I'm assuming the draggableElem is just a single element. setDraggable(){ this.offsetLeft = $('.scrubber').offset().left; this.scrubberWidth = this.screenWidth; TweenLite.set(".progress", {scaleX:0, transformOrigin:"left"}); this.draggableElem = $('.vidcontrols-cursor') this.draggable = new Draggable(this.draggableElem, { type:"x", trigger:".scrubber", bounds:".scrubber", onPress: () => { TweenLite.set(this.draggable.target, {x:this.draggable.pointerX - this.offsetLeft/* offsetLeft: a class' property...*/}); this.draggable.update(); // why are you passing in this? We know what this is. this.updateProgressBarScale(this); }, onDrag: () => { // stuff here }, onDragEnd:() => { // stuff here } }); } df
  17. 5 points
    Hi @Anand Makhija, This could be a way ... https://codepen.io/mikeK/pen/GyPYPZ Happy tweening ... Mikel
  18. 5 points
    I would agree, maybe consider using the plane effect only once and make it a bit quicker. https://codepen.io/Visual-Q/pen/oROYow
  19. 5 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.
  20. 5 points
    My two cent approach: https://codepen.io/PointC/pen/ardXWP Happy tweening.
  21. 5 points
    Hello @DevSaver and welcome to the GreenSock Forum! The plus sign (+) concatenates (joins) the string and the variable. var myVariable = "left"; TweenMax.set(item, {backgroundPosition: "center " + myVariable}); Happy Tweening!
  22. 5 points
    The worst thing is when you spend two hours visiting forums, rereading documentation, rewriting it ten different ways... end up convinced that you have no idea what you're doing and then you see it... but for the typo, what you had to begin with, was fine. ?
  23. 5 points
    Yeah, I agree with Shaun, CustomWiggle would probably be the easiest approach:
  24. 5 points
    There are few things to do to make something like this happen. Manipulate the DOM to make a duplicate of each image to allow each "cloud" to loop. This means creating a wrapping container, cloning the cloud image and appending it to the new parent wrapper. Some CSS to make sure the containing wrapper is twice the width of the cloud it's containing. Tween each cloud wrapper by 50% of its width and repeat that tween indefinitely. Set the duration of each such that the closer clouds move by quicker and each layer back is slower than the previous. Hope that helps!
  25. 5 points
    Hi @Kamran, Depending on if you are using hashes ... this might get you going. All boils down to the onhashchange. https://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser
  26. 4 points
    CodePen or this library isn't the problem. If you check your console, it clearly shows your JavaScript is not valid. You're missing a }. Try this. tl.from(chars, {duration: 1, autoAlpha: 0, stagger: 0.2}, "+=0");
  27. 4 points
    What Shaun said is definitely the core of the issue. A small side note is that in GSAP 3 it's more proper to put the duration inside of the vars parameter, like so: tl.from(".bracket-l", { duration: 1, x: midPointOffset }, 0) .from(".bracket-r", { duration: 1, x: -midPointOffset }, 0);
  28. 4 points
    I agree with Zach in this, I think you're over-complicating things a bit (something we all have done to be honest ). You can easily create an empty timeline using useState() and later in the initial render you can add child instances, labels, callbacks, etc. to it, in order to avoid errors: const [tl] = useState(gsap.timeline({paused: true)); useEffect(()=>{ // here add instances to the timeline }, []); You're right about adding paused timelines to a parent one. Normally in that scenario I create the child timelines paused and when I add them to the parent I un-pause them: const masterTl = gsap.timeline({ paused: true }); const childTl = gsap.timeline({ paused: true }); // add child instance masterTl.add(childTl.paused(false)); // later on your code you only control the parent Timeline Finally, avoid adding instances to a timeline because of a state update using useEffect, this will keep adding instances and callbacks to your timeline on every state update and at the end you could end up with a lot of unwanted callbacks and instances inside your timeline. As suggested create the timeline at runtime and then, if possible, add all the instances to the timeline on the initial render. Then control the timeline using useEffect. Here is a simple example of creating and controlling a timeline using Hooks: https://stackblitz.com/edit/gsap-react-hooks-timeline-instance-toggle Happy Tweening!!!
  29. 4 points
    If you know the index position of the element it should be something as simple as this: document.querySelector(".anyclass:nth-child(3)"); If you don't then you'll have to do a querySelectorAll(".anyclass") and then iterate through that collection and find a specific attribute in the targeted element. Happy Tweening!!!
  30. 4 points
    I recommend using a regular input element with type="range" for this. You don't even need GSAP, really https://codepen.io/GreenSock/pen/oNNxOxR?editors=0100 If you need more control over the styling (stying default input elements across browsers can require a lot of testing/workarounds) then you could create a dummy version using divs like you did and hide the input. But this approach avoids the issue you describe above. Edit: Looks like Blake beat me by half a second
  31. 4 points
    Hi @Ek1 Have you tried using .fromTo Tweens for this? That way the start and endpoints are both existing in the animation code. actionTrHover .fromTo($trPoly,time, { attr: { points: "0,0 100,0 100,100" } }, { attr: { points: "-10,0 100,0 100,110" } }, 0)
  32. 4 points
    And this one. https://codepen.io/MAW/pen/KdmwMb
  33. 4 points
    It really depends on what the "type" is. Typically it's "x,y" which refer to the translateX/translateY transforms, and those are relative to the element's original position in the document flow (before any transforms are applied). You could think of it as if it's from the top left corner of the element in that case I guess. But if the type is "left,top", it'd refer to those values which are dependent on other factors like whether the element is position:relative or absolute (and would be affected by the offsetParent).
  34. 4 points
    Hi @Daniel Hult I think this issue is that you've defined your tween inside your play/reverse function. You'll want to define that outside, and just use the click listener to play or reverse the Tween. Here's a fork of what that looks like (I also used TweenLite instead of a timeline to further simplify, but both ways will work). https://codepen.io/ryan_labar/pen/oNvwqYo?editors=1010 Note: You'll also want to set reversed to True, so that it play in the forward direction on first click.
  35. 4 points
    Are you literally trying to remove the ease from memory? You can do this: CustomEase.create("myEase", "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"); delete Ease.map.myEase; But that's pretty much pointless. The performance of your app will improve 0.000000000%. Even if you have 10,000 different custom eases in memory, the performance difference will be negligible. When it comes to profiling animations, the main things you should be mindful of are rendering and painting times in the performance tab.
  36. 4 points
    Yep, very doable. In addition to Zach's excellent advice I'd offer the possibility of using the SVG clip-path too. Masks differ a bit and are great when you need strokes or gradients to be part of the mask. Here's a quick clip-path option. Maybe it'll give you some ideas. https://codepen.io/PointC/pen/xxKwZqQ Happy tweening and welcome aboard.
  37. 4 points
    Ha, you're the king of super long, complicated posts today Are you just making suggestions for potential feature additions to Draggable? Or was there a problem/bug you wanted to report? I'm not 100% sure I follow all that you wrote, but I'll mention a few things (none of which may be helpful): If you need both x and y involved in a snap, that's supported and here's a demo: https://codepen.io/GreenSock/pen/wgapaY If you want to sense the direction of the drag, there's getDirection(): https://greensock.com/docs/Utilities/Draggable/getDirection() We didn't implement *= or /= or %= because they're just not that useful and implementing them would force ALL users to pay the performance and kb hit for something that probably 0.00001% of the users may actually tap into. It just didn't seem like a good tradeoff. Your demo showing that scale:+=0.5 affected scaleX and scaleY seemed to work exactly as I'd expect. Am I missing something? Why would you not thing it'd affect scaleX and scaleY (scale, after all, is just a shortcut to affect scaleX and scaleY). If you still need some help with something, yes, it'd be REALLY good if you provided as reduced a test case as possible and please keep the threads focused on one question at a time if you don't mind. It's totally fine if you open a few different threads - it's just too convoluted and confusing for people to follow when a whole bunch of things are mashed into one really long post Have a good night!
  38. 4 points
    Vue's data system uses setters to detect changes, which is being triggered with this.timeline = new TimelineMax() in your mounted section because it's a different type than null. And you don't need reactivity for a timeline. Vue can't detect when you make changes to a timeline.
  39. 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").
  40. 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
  41. 4 points
    https://canistop.net/ ¯\_(ツ)_/¯ I’ve happily read that in Bootstrap v5 they are dropping JQuery and IE 10 & 11 support also. Given its popularity, I hope each will help diminish the usage of both in the industry. IE is much like a roulette wheel with all red while trying to hit black. ? https://caniuse.com/#compare=ie+10,ie+11,edge+12,edge+13,edge+14,edge+15,edge+16,edge+17,edge+18,edge+76
  42. 4 points
    When I open the console in FireFox I am seeing `TypeError: a is undefined` In Chrome I see: `TweenMax is not defined` To me this looks it's an issue with your overall JS setup rather than the code you're using to animate. You have some of the JS Loading from the server and some inline. I'd bet the inline JS is looking for GSAP before it loads from the server. May want to delay your inline JS until the page is loaded/ready. Another note: TimelineMax is included with TweenMax, so you don't need to import both. Also, you're loading a lot of JS files (more than 15). You'll likely see a performance hit with this.
  43. 4 points
    Have you tried not using base64? I would recommend using a sprite sheet for something like that.
  44. 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
  45. 4 points
    Yes I am. ? Context matters. Those instructions were for the question being asked. The -g is incorrect. That installs it globally. > npm install gsap Check this out for React examples. https://greensock.com/react
  46. 4 points
    @TimeFrame Even though the Tweens are being added to fixed positions, the timeline duration is getting greater each time openLeftMenu() is called ... $('body').on('click', '.hamburger', function () { if ($(this).hasClass('is-active')) { hideLeftMenu(); } else { openLeftMenu(); } }); with openLeftMenu() calling animationCanvas() which in turn appends a sequence of tweenNavigation.to(). Here are 10 "open" clicks on .hamburger https://codepen.io/sgorneau/pen/ZZKqzK And here is the output of a Pen where animationCanvas() is called once, and .hamburger clicks invoke tweenNavigation.play() and tweenNavigation.reverse(). https://codepen.io/sgorneau/pen/rbmqrK Best to create the Timeline once and just use methods to control it.
  47. 4 points
    I don't know anything about Harvey, but I generally just write my own breakpoint rules. We've had quite a few discussions about responsive animations that may help. Here are a couple: Happy tweening.
  48. 4 points
    Yep, DrawSVG works its magic by making one big dash and animates the offset. You'll need to use a mask to make this work. https://codepen.io/PointC/pen/XQpzYj I wrote a bit about this here: Happy tweening.
  49. 4 points
    Indeed this is happening since the latest VSCode update and is more likely a VSCode thing and how intellisense (not too intelligent it seems? ) is working. One solution could be to define global variables in your workspace or change the settings. Much like you I've seen this behaviour when working with VSCode, lucky me, in the project I'm working right now I'm using webstorm, so I don't have to deal with this for the next weeks , but still you could start an issue in VSCode repo or look in stack overflow.
  50. 4 points
    At first I thought that was indeed a wonky bug but having spent some time looking at it, it kind of makes sense... The catch here is the subtle detail that you setup a label and then immediately added two .to() calls to tween the autoAlpha of the same element overlapping each other. If we write out how long those tweens are and where they overlap, we can see that GSAP has to merge them together (as it's its default behaviour when overwriting competing tweens) KILLS ONE OF DEM DEADED. Done for. Snuffed. Gone to a better place. (see @Carl official state-sponsored GSAP behaviour report in the post bellow). I stand corrected. Think of each dash 10 seconds. [ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ] Total time [ - - - - - | - ] Label ('start', 1) [ - - - - - - - - - - - - - - - > | | | | | | | | | | | < ] Tween ('start+=1.4') [ - - - - - - - - - - - - - - - - - - - - - - > | | | | | | | | | | | < ] Tween ('start+=2.9') If you stop the overlapping of the competing tweens, the issue goes away. I am guessing here when I say, what could be causing this strange behaviour is how GSAP creates the easing curve of the merged competing tweens and because of the lenght of the whole timeline, it causes the very first frame to have an opacity of 0.375 as it would be the very first frame of the resulting merge. Maybe @GreenSock himself will have a chance to look at it and explains what could be going on under the hood.
×