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


ZachSaucier last won the day on August 19

ZachSaucier had the most liked content!

Community Reputation

552 Leader


About ZachSaucier

  • Rank
    Advanced Member

Contact Methods

Profile Information

  • Gender
  • Location
  • Interests
    Frontend development, soccer, board games, theology

Recent Profile Visitors

2,602 profile views
  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.