Jump to content
GreenSock

Carl last won the day on December 31 2022

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,710
  • Joined

  • Last visited

  • Days Won

    541

Carl last won the day on December 31 2022

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. Yes it's totally possible to do everything on that site with GSAP. It's important to note that the hero animation is basically a series of images stitched together in a <canvas> element to simulate a video. If you inspect the page you'll see this canvas element <canvas width="1120" height="1002" class="ImageSequencerstyled__Canvas-sc-b2vw9p-0 cJWUKl"></canvas> Notice it has a class containing "ImageSequencer". That's a good clue! If you check the network settings you'll see a TON of images being downloaded. It would be totally possible to use ScrollTrigger to control that sequence of images being rendered.
  2. Thanks Jonathan, the broken link has been updated: GSAP 3 Beyond the Basics
  3. i noticed you have "0 0 100% 100%" as your viewBox. I don't think I've ever seen that before and I'm not sure if it's even valid. As far as making an svg element 100% width and height svgs naturally scale and everything inside them will scale with them (based on viewBox and viewport settings). In the demo below the rounded edge <rect> i started out with is inside an svg that is only 300px by 300px but you will see it scales up with the window size. https://codepen.io/snorkltv/pen/gOjzKoE?editors=1010 as far as the percentage values used by DrawSVG I really can't explain it much better than the interactive example in the docs https://greensock.com/docs/v3/Plugins/DrawSVGPlugin In the examples where we have the lines drawing from center-top i have a full lesson on how those measurements are calculated in my SVG Animation with GreenSock course. the reason i use a set is because we need to specify the starting and ending values, you could also use a fromTo(). If you are struggling with creating svg elements, I strongly recommend BoxySVG it's free and I use it loads in my course. In the video below you'll see how to: create a rectangle with rounded corners convert it to a path add a custom start point split-path-quick-tip.mp4 view the rounded rectangle as path svg (in google chrome) Trust me, SVG is full of pitfalls and it took me years to really figure it all out and I'm still learning. Hopefully these resources can help get you closer to achieving the goals of your project.
  4. I'd say most of the time, if you want to set funky start positions for rectangles it's probably best / easiest just to use a path as @alig01 suggested. However, using the width and height you can calculate the top center and bottom center coordinates. https://codepen.io/snorkltv/pen/wvxjJwP?editors=1010 If you add rx attributes to both it will require some tweaking of the numbers, which again would bring us back to a <path>
  5. Very glad to hear it worked!
  6. Hi, i'm not exactly sure what effect you are going for. FWIW it seems a bit disorienting to move something down to a y:200 while scrolling up. That aside I would avoid creating 2 timelines initially time that control the same properties of the same thing. To avoid conflicts I would suggest creating these animations fresh when you need them inside your callbacks sort of like: ScrollTrigger.create({ trigger: ".top-page", start: "top-=100 top", end: "top+=200 top", markers: true, onEnter: () => {let tl1 = gsap.timeline({}) .fromTo("header", { y: 0, overwrite: 'auto' },{ duration: 2, y: 200, ease: CustomEase.create("custom", "0.5, 0, 0, 1"), overwrite: 'auto' })}, onLeaveBack: () => {let tl2 = gsap.timeline({}) .to("header", { scale: 1.2, y: 200, }) .set("header", {y: 200,scale: 1,},"hide") .to("header", {opacity:1},"start2") .to(("header"), { y: 0, duration: 1, ease: "power4.out" }, "start2")} }); I would also remove locomotive scroll until you know things are working fine without it. Hopefully this set up will allow you to remove some of redundancy between the 2 animations like tweening and setting y:200 multiple times. If you need more help please try to simplify the animations as much as possible in a fork of the original pen.
  7. welcome to the GreenSock forums, Thanks for the demo. Unfortunately, the code is a bit much to untangle quickly and I'm not really sure what effect you are going for. However, my advice would be to make sure your trigger is not the same thing that you are animating. If you animate the trigger it can mess up all the measurements ScrollTrigger needs to make. try something like this <div class="triggerElement"> <div class="targetOfAnimation"></div> </div> If that doesn't help please consider simplifying the demo by removing mapper objects, parsing functions and passing data around through functions like scrollListner(element, anim1, animateOnce, mirror); I understand it is probably an elegant and effective way for you to code but it causes first-time viewers additional effort to decipher. thanks!
  8. Hi Louis, Nice to see you. Greart demo. Please try moving the GSDevTools.create() to the very end of your js after the forEach loop. It appears to resolve the issue.
  9. Wow @GreenSock this is incredible.
  10. similar to @Rodrigo's slick approach I tend to reach for solutions that end up with a timeline being constructed. I also like to lean on as many of the API features as possible like: repeat, repeatDelay, stagger, etc. From what i understand every item fades in and fades out except the first item which doesn't need to fade in. Using a Loop add a single tween to a timeline that fades the first item out. Then loop through the rest and add a repeating tween to the timeline that fades each item in and out. https://codepen.io/snorkltv/pen/rNrzobQ?editors=1010 tweenFromTo() Here I build a timeline with a single stagger and use tweenFromTo() to omit the part of the timeline where the first item fades in https://codepen.io/snorkltv/pen/LYBjMJK I added GSDevTools so that you can mess with the fade and static variables and test that they are working properly. There are many ways to approach these things and the best one is the one you're most comfortable with. Note: Rodrigo's approach would have a clear advantage if you want a different ease or animation for the enter and exit animations.
  11. Great work. The timing with the music is spot on.
  12. thanks for the kind words @Rodrigo Here's the demo for easier access https://codepen.io/snorkltv/pen/KKvQOKY?editors=0010 I suspect it wouldn't be too hard to change it to read a color from data-attribute on the trigger (section) instead of pulling it from an array.
  13. Please see the "Special Properties" section https://greensock.com/docs/v3/GSAP/Tween Timelines have similar callbacks too. https://greensock.com/docs/v3/GSAP/Timeline This video is part of my courses but it's also on YouTube.
  14. Thanks for the demo. I don't use React at all so I can't help much with your actual project. However, I am working on a Swiper lesson for my GreenSock courses so I can share the following as a basic "work in progress" to show how to get the 2 to work together. https://codepen.io/snorkltv/pen/XWBNJjK?editors=1010 Despite not being able to help you with React I have a few thoughts on what you're doing: My strong personal opinion is: try to break free of the mindset of "adding css classes to things to trigger animations". Swiper offers events that you can use to trigger your GSAP animations. In my example everything is triggered via the "slideChange". Next, I'm a bit lost on how you plan to implement scrolling but right now your page doesn't scroll at all. I see what appears to be 3 tweens with ScrollTriggers assigned but I don't understand how the triggers are supposed to enter and leave the viewport to trigger the animations. If your carousel is going to be "locked in place" and your page doesn't scroll, I think you could use Observer to help you out. It shouldn't be too hard to wire it up to tell Swiper to go to the next or previous slides. Hopefully this helps you understand an alternate approach and you can better decide what will work best for your project.
  15. that was my first guess too @Rodrigo however, it seems that on further inspection it is using a triangular clip-path that animates to a full rectangle. Here is a screen shot @iuras I had a similar demo from my GreenSock courses so I made a few tweaks to the polygon coordinates. Maybe this will help https://codepen.io/snorkltv/pen/BaPLVmL
×