Jump to content
GreenSock

Carl last won the day on October 13

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,681
  • Joined

  • Last visited

  • Days Won

    540

Carl last won the day on October 13

Carl had the most liked content!

About Carl

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. ha, that's a pretty funny oddity. I haven't seen that before. I switched to using a set() (no animation) an I used the position parameter instead of duration. feel free to change the duration variable var duration = 1; gsap.delayedCall(1, () => { let textTimeline = gsap.timeline({ repeat: -1 }); array.forEach((obj, i) => { textTimeline.set(".switch-text", { innerHTML: array[i] }, i * duration); }); }); https://codepen.io/snorkltv/pen/BaVENgv?editors=0010
  2. I have a blog post here https://www.snorkl.tv/greensock-staggers-with-seamless-loops/ with full video tutorial and multiple demos. Notice in the demo below that item 4 animates out while item 1 animates back in https://codepen.io/snorkltv/pen/ExVEOPa
  3. Hi and welcome to the GreenSock forums, Thanks for the clear demo. It seems you found an alternate solution but this could work too https://codepen.io/snorkltv/pen/GRGeJYX?editors=1010 This allows the text-1 to fade in from the start. Note I set the opacity of all h1 tags to opacity:0 in the css. This removes the flash of un-styled content and makes the looping cleaner as I implemented it using the label. You could also approach this using a special stagger technique but I don't want to throw too much at you if you're just starting and you're comfortable with your solution.
  4. Hi @ti-sign Very nice of you to stop in and offer up this example. It's always interesting to see how folks approach challenges like this. I really can't say there is anything wrong with what you did and certainly no "immediate stupidity" 😁 I came up with this approach in my lessons https://codepen.io/snorkltv/pen/wvqjmQq?editors=0010 The short explanation is that I store the section and nav colors in separate arrays. If you open the demo in a new window and resize you'll see the height of the nav can change size and yet the nav color always changes exactly when a new section hits the bottom of the nav. Perhaps you or someone else will have fun experimenting with this technique as well. As far as dynamically reading HSL colors to decide the appropriate nav color, that's not something that would come quickly to me, but it doesn't mean it isn't worth exploring further. Thanks again!
  5. I didn't study the exact motion for all that long, but this might be a good start https://codepen.io/snorkltv/pen/ZERxLRJ?editors=0010 keep in mind elements inside an SVG can't have 3D transforms applied.
  6. thanks for the simple demo. my jQuery is a bit rusty, but I recall that hover would handle 2 functions for mouseenter and mouseleave. The biggest issue is that you are creating a new timeline on every hover. I don't really know what the end result is but usually it is best to create the timeline once for each element and then control it differently for each mouseevent. hopefully the following can get you going in the right direction. https://codepen.io/snorkltv/pen/VwdQYRb?editors=0110 "play none none none" looks like toggle actions for ScrollTrigger and wouldn't apply at all here.
  7. your second tween is using the default ease of power1.out. add an ease:"none" to the second tween and it should line up nicely. .to ("#motionDraw", {drawSVG: "0%", ease:"none"},"<")
  8. Here's another one from the GreenSock team that may help https://codepen.io/snorkltv/pen/KKmZYGy I have a bonus video that goes over the basic setup in my free GSAP beginner's course as bonus lesson.
  9. Hi Adam, Thanks for the mention. So nice to hear you are finding the courses helpful. That's a cool animation you have already. 👍 I don't have time at the moment to experiment with this, but in addition to @GreenSock's great advice I'd recommend taking a step back perhaps and see if you can get the visual effect you want to work in just a straight line. It might get a bit challenging with the rounded corners AND with the stroke length changing size. As the stroke gets smaller, less of it is going to be under the part of the gradient that fades it out. Unfortunately it's these types of experiments that can take some time to figure out.
  10. Carl

    GUI for GSAP3?

    I don't use Animate with code. Unfortunately Adobe doesn't do much to support the canvas export. The underlying framework, CreateJS, was abandoned by its creators years ago so there is very little hope of any improvements. It's a shame as there was a lot of potential and GreenSock code worked well with it all. I just use the timeline's keyframes and tweens for very simple animation mockups and such for video or gif export. Basically anything that is fixed size and aspect ratio. I would not recommend it for any type of web development as it has no support for DOM elements, SVG, or anything related to responsive layouts. The secret sauce as @GreenSock mentioned is to get a firm grasp of the basics and slowly add more stuff as you learn it. This front-end stuff is pretty complicated these days and everyone has to suffer through quite a bit to get good. I wish we didn't, lol. @The Old Designer glad to hear you enjoyed my courses. thx for the recommendation!
  11. Carl

    GUI for GSAP3?

    For me Adobe Animate is the answer here. I still use it for 95% of my design work. I'll also use it occasionally for basic animations when the end goal is an animated gif or short video and I don't want to deal with the hassle of creating things with html and css. And although I probably fall into the group of people who can "just code animations as easily as typing a message on a forum", it still requires a tremendous amount of time to set things up and refine the timing and such. For a short animation I may literally write the basic animation code in 15 to 20 minutes but there's 3 or 4 hours (at minimum) of other tedious stuff and much more if you are adding interactivity or variations for different screen sizes. All this to say, don't get discouraged. It takes a lot of time and practice to build up the skills. Once you get a few GSAP muscles in shape you'll be amazed at how much control you have over the animations with very little code.
  12. that is correct, you can't use groups in a clipPath. you can give multiple elements in your clipPath the same class and move them all at the same time. scaling and rotating could get a bit weird though. not really sure what you're trying to do.
  13. You can animate things inside a <clipPath> fine in Safari as shown in this demo here https://codepen.io/snorkltv/pen/yLEOdJK?editors=0110 I noticed you are using <clippath> instead of <clipPath>. Maybe safari is picky? I had trouble following your demo with the loops and mediaqueries. If you still have trouble please reduce it down to a single tween on a single element if that works, then slowly build up.
  14. Excellent job as always @mvaneijgen I just recently learned about toLocaleString() const num = 123455.34 console.log(num.toLocaleString()) //output 123,455.34 Great for currency too! docs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString https://codepen.io/snorkltv/pen/jOKrZJy?editors=0010
×