Jump to content

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

ZachSaucier last won the day on August 19

ZachSaucier had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by ZachSaucier

  1. Hey dgs. Welcome and thanks for being a Club GreenSock member! There's a few different ways to do this sort of animation. The way that I would do it is something along the lines of this: var tl = new TimelineMax({paused:true}) tl.to(".box", 1, {"scale": 0.3}) var maxDistance = 400; window.addEventListener("scroll", function() { var yPos = window.scrollY; tl.progress(yPos / maxDistance); }); https://codepen.io/GreenSock/pen/BaBpELw?editors=0010 I'm happy to explain any part of this if you're having any trouble!
  2. Hey 31its and welcome, Your request is a bit unclear to me - are you wanting to create something like that but using web technology like Canvas or SVG? Or are you wanting to keep that hand drawn look by using PNGs and create a loop, just without using the tool that you listed? What is your end goal?
  3. Hey Sharik, Unfortunately I don't have the time to build it out for you but if you follow the steps I listed above I think you should be able to create the effect that you're looking for. I recommend creating it fully outside of React and then porting it into React since it seems that you're not very comfortable with React. We have a basic guide for how to use GSAP with React which you can read about here: I don't know you or your abilities so it is really impossible for me to make the timeline for you. I can tell you this: keep in mind Hofstadter's Law
  4. fontVariationSettings is what you call a shorthand. GSAP doesn't animate most shorthands because it's tough to know exactly what the person is trying to do. I tried just animating fontWeight but it didn't seem to have inbetween states in the demo above when I tried it, it just jumped from 700 to 400, etc. (you can test it yourself by removing the onUpdate). It may work in your case, I'm not sure because I don't really understand everything that's going on with variable fonts at this point.
  5. How do you find these things?? It's impressive.
  6. That's what we hope to do here at GSAP - do all the hard parts so that you guys can focus on the fun, exciting, and cool stuff
  7. Hello sharik and welcome to the forums, There are a few different ways to do this. I would recommend looking at GSAP's SplitText and our timeline. The core of it is: have an array of words that you want to change out. Make sure the there are <span>s or something surrounding all words that you want to replace (and replace with). After a certain amount of time, fade out the old word, place the new one in the DOM (without being visible), get the width of the new word and adjust accordingly, then fade in and slide down the new word. Then repeat that process as needed. Does that makes sense? Let us know if you run into any issues and we can help with those. Here's some more information about SplitText and TimelineMax. P.S. Are you sure you want to make a direct copy of that group's website? It does not make your company stand out if you are just copying another company completely. I suggest that you change things up a bit more. Maybe include things from other site's designs so that the mix the sites becomes your own.
  8. Happy to help! I can't tell you how many hours I've wasted trying to debug what ended up being wrong variable names that are similar in JavaScript (like tl vs t1)... Sometimes it's good to just have another set of eyes
  9. Just switch it to use e.clientX and e.clientY like in Blake's demo https://codepen.io/GreenSock/pen/qBWqJyy?editors=0010 Happy tweening
  10. Hey bromel, fun request Welcome back! Using your method, I'd make use of a counter and GSAP's .invalidate() to do this. https://codepen.io/GreenSock/pen/XWrNxgg?editors=0010 The above will be much easier to do in the next version of GSAP! But it likely doesn't look like what you imagined because it's animating from one color directly to the next, which isn't exactly what Blake's pen is doing. To fix this and make it as smooth as Blake's demo it'd be better to use translation instead of directly animating the color stop values. You can do that by doubling the color stops and animating their offsets like so: https://codepen.io/GreenSock/pen/qBWqJxY?editors=0010
  11. Hey dada78, I believe that the main issue is that 'wght' 700 is not a valid value. You'd need to concatenate like so: 'wght ' + 700 However, GSAP doesn't really know how to animate this either as it's a string. I think most people animate variable fonts by using CSS variables. GSAP has a Quick Tip dedicated to animating those: There's also this demo animating a variable font using GSAP: https://codepen.io/osublake/pen/GPqQaB?editors=0010 But you can use font-variation-settings if you'd like to. You could even put it in an onUpdate and animate the fontWeight instead to have fallback support for browsers that don't support variable fonts, like so: https://codepen.io/GreenSock/pen/RwboYOy?editors=0010 Thanks for posting this question - I've been wanting to use GSAP with variable fonts and this was a good start
  12. If you strip it down to just the points it'd be helpful if you posted the demo back in this thread for others (like myself) to use I guess Jack may have a version like that somewhere in his chamber of secrets.
  13. Haha, if that's a joke, it's a good one given I don't see any membership associated with your account The support on these forums is free! We have a group of incredibly helpful volunteers who moderate the forums for the most part. So thank them for the help that they give!
  14. Hello superunknown and welcome to the forums, I don't think that's right. Your code is very close to what should work as far as I can tell. In fact, the tl.reversed() ? tl.play() : tl.reverse(); (notice the () after play - maybe that is your issue?) is exactly what I was going to suggest you try. To help you understand what it's doing, tl.reversed() is checking to see if the timeline is reversed. The ? operator is essentially a shorthand for an if statement where the part before the : is if reversed() returns true and the part after is if it returns false. It could be rewritten as: if(tl.reversed()) { tl.play(); } else { tl.reverse(); } With that being said, it's hard to tell exactly what is going awry. If the above doesn't fix your issue, could you please create a minimal demo of your issue in a CodePen? The below thread provides more information on how to do so.
  15. Maybe Jack's explanation here can help make the differences more clear. If there are particular points of confusion about the two, please let us know! We're happy to help.
  16. Hey 31its and welcome to the forums, Given the very hand-drawn, styled nature of your animation, I might actually recommend that you use a PNG sprite animation instead of DrawSVG (though DrawSVG is great for this sort of animation, it's hard to do that style of drawing in SVG). You can read more about how to do that with GSAP in the threads below. Let us know if you run into anything you can't figure out!
  17. You could modify the demo that you linked to remove the line functionality. I quickly commented out some lines to produce this, but you could probably strip a little bit more logic if you'd like to (especially in relation to the controls). https://codepen.io/GreenSock/pen/NWKbadW?editors=0010
  18. In addition to the great advice from Craig, if you could post a minimal version of your issue online to a site that we could access we might be able to help more with debugging.
  19. Hopefully not In almost all cases it's best to load more content when it's needed, not load it all at the start. Keep us updated! Page transitions are fun when done right.
  20. ZachSaucier


    Hello Harley and welcome to the forums. Could you please recreate a minimal demo recreating your issue in something like a CodePen? The below thread should provide more info on how to do so and the below demo should help get you started. https://codepen.io/GreenSock/pen/xxKEmML
  21. This sounds like you're talking about a "medium" sized website which can be a little awkward to handle because there's definitely not a "right answer" and a lot of it boils down to preference. When I see this type of situation, I immediately think: what needs to be loaded on every page (the overall framework) and what is more so specific to certain pages. Then I personally would put the general stuff in its own JS file, etc. and load page-specific JS files as needed. I may or may not use a static site generator to do this (it depends on the nature of the site). Another person might do roughly the same thing but use a component based framework to do so (which is essentially a more complex static site generator). It boils down to 1) what are your needs, 2) what are you most comfortable using, and 3) what sort of timeline are you working on (because if time doesn't matter so much you can play around with different ways or teach yourself a new way, etc.).
  22. Now that's a big question, haha. You could start by looking at Chrome's developer resources like this article. But I recommend just creating a minimal demo for us to view the issue as we're much more likely to be able to help quickly in figuring out exactly what's happening
  23. It's possible that it could be performance jank (I'd guess the gradient is your biggest culprit) but it could be something else entirely. Without a minimal demo it's hard to say. What are you using to do the carousel/slider animation?
  24. It would be helpful if you provided a minimal example of your draggable code in something like a CodePen for us to see exactly what the issue is and more properly understand what you're trying to do.
  25. You'd use this.x in the callback. this inside of Draggable callbacks returns the Drabble object itself unless you specifically set the scope using one of the on____Scrope (like onDragScrope) functions. Modifying your code from above, you could get the values like so: Draggable.create("#firstNamedQuanDragImage1", {type:"x,y", bounds:"#nQL_DragDropGrid1", edgeResistance:0.5, cursor: "pointer", onDragEnd: function(e) { console.log("x: " + this.x + ", y: " + this.y); } });