Jump to content
GreenSock

Carl last won the day on December 31 2022

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,713
  • 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. Carl

    Random reveal

    being that I just did a lesson on cloning groups in my SVG Animation with GreenSock course, I figured I'd take a stab at this. The top-level approach was: take polygons out of pattern in defs wrap them in a group create a loop-inside-a-loop to clone the initial group and place the clones in a grid animate using same technique as above https://codepen.io/snorkltv/pen/ZEjNvKw?editors=1010 Hope this helps
  2. Carl

    Random reveal

    welcome to the GreenSock forums. thank you for the minimal demo. I don't think you can target unique instances of objects that repeat in a pattern like that. With what you have I think this is the easiest way to randomize it a bit https://codepen.io/snorkltv/pen/rNrgBqm?editors=0110 The only option I know is to programatically create the grid so that each polygon is it's own entity in the svg. There's a chance I'm wrong, and if so, I welcome other ideas.
  3. Great to have you as a student in Creative Coding Club! Definitely check out the lesson ScrollTriggers for Multiple Sections in ScrollTrigger Express. The video goes into great detail on how to loop through multiple elements, find child elements to animate, and control each section's animation with ScrollTrigger. I modified that lesson's demo to include a basic SplitText animation on the <h1> in each section https://codepen.io/snorkltv/pen/gOjZPEY?editors=1010 Side Note: if anyone around here is into 90's imports, a 1994 Supra just sold for $150,000 on BringATrailer.com
  4. 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.
  5. Thanks Jonathan, the broken link has been updated: GSAP 3 Beyond the Basics
  6. 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.
  7. 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>
  8. Very glad to hear it worked!
  9. 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.
  10. 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!
  11. 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.
  12. Wow @GreenSock this is incredible.
  13. 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.
  14. Great work. The timing with the music is spot on.
  15. 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.
×