Jump to content

Carl last won the day on December 31 2022

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. 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
  2. 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.
  3. Thanks Jonathan, the broken link has been updated: GSAP 3 Beyond the Basics
  4. 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.
  5. 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>
  6. Very glad to hear it worked!
  7. 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.
  8. 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!
  9. 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.
  10. Wow @GreenSock this is incredible.
  11. 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.
  12. Great work. The timing with the music is spot on.
  13. 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.
  14. 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.
  15. 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.
  16. 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
  17. to add empty space / time to the end of a timeline you can add a tween on an empty object with the duration of your choosing tl.to("#someThing", {x:300, duration:1}) .to({}, {duration:3}) // adds 3 seconds of time at end
  18. thanks for posting that @akapowl I was looking through their API page https://flickity.metafizzy.co/api.html and thought it was really strange not to have any events relating to slide change. I totally missed that they were listed on their own page as you shared. 🤦‍♂️
  19. Hi @Sam A So nice to hear you are enjoying the courses! Great job coming into the forums with a clear demo. Glad to see you got the best help in the world from @GreenSock Happy New Year!
  20. thanks for the demo. nice job! If you want a ScrollTrigger animation to only run once you can set once:true https://codepen.io/snorkltv/pen/ExpybZV?editors=0010 From https://greensock.com/docs/v3/Plugins/ScrollTrigger Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".
  21. It sounds like you want the behavior of the demo below https://codepen.io/GreenSock/pen/XWzRraJ If yes, then check out Observer Plugin Chances are you'll want to mix ScrollTrigger and Observer sections so this demo may also help https://codepen.io/GreenSock/pen/qBVgbXa/1ccf60146d680c09ba6074bf9132778d hopefully these help point you in the right direction.
  22. Hi @Faz_kh Thanks for your interest in my courses. Unfortunately, this promotion was only for Club GreenSock members and it expired over a year ago. The good news is I currently have a public End of Year sale that offers tremendous value to everyone. You can unlock my entire course bundle for only $67 or just $2.95 a month. Below is a list of the over 200 lessons available. I'm confident there is no better value in any front-end training and I hope you find this favorable. Join Creative Coding Club Offer expires Jan 1 Carl GSAP 3 Express Welcome to the course Our Development Environment GSAP 3 Express Notes and Instructions GSAP Object: Tweens and Timelines Basic Tween from() and fromTo() Special Properties: Delay and Repeat Special Property: Ease Reading Ease Curves Special Property: Stagger Tween Control Why from() Tweens Glitch and Stop Working! Using the GSAP Documentation Why Timelines are Important Basic Timeline Intro Position Parameter Visualizer Basic Timeline Position Timeline Control and Labels Simple Rollover / Hover Effects Rollover / Hover Effects for Multiple Elements Constant Hover Pulse with Smooth Reset Project Setup Basic Animation Timeline Defaults GSDevTools Tweak Timing Remove Flash of Un-styled Content (FOUC) Typewriter Effect with TextPlugin Getting Started with SplitText SplitText Word by Word SplitText Line by Line Get Started with ScrollTrigger in 3 Easy Steps Percentage-Based Keyframes Percentage-Based Keyframes Part 2: Benefits, Downsides and Challenges Beyond the Basics Chapter Intro From Illustrator to Animation Getter-Setter Methods Smart Play-Pause-Restart Toggle Button Scrub Through an Animation with an HTML Input Slider Tween progress() of an Animation OOPS: Gotta Fix the Buttons Intro Callbacks Build a Timeline Visualizer with getChildren() killTweensOf() gsap.utils.wrap() gsap.registerEffect() CSSPlugin: Use clearProps to remove inline styles 3D Transforms Understanding GSAP's immediateRender Property Tweening function-based values Ease-based distribution of start times Using the weightedRandom() helper function Using the distribute() utility function Rubberbander Text Effect Staggered Staggers. What? 3D Text Rotator Repeat Values on Tween vs Stagger Object Using Callbacks in Staggers Staggered Staggers with No Gap Intro Linear Navigation with addPause() Non-Linear Navigation Using Labels Add a Pause to a Timeline for a Specific Amount of Time Nested Timelines Functions That Return Timelines tweenTo() and tweenFromTo() File Setup Animate Panel 1 Create a function to animate 3 panels Morph curve using AttrPlugin TItle Effects Generator Part 1 Title Effects Generator Part 2 Title Effects Generator Part 3: Wrap Up Refactoring Multiple Timelines Into a Single Tween Staggered Animations Variations on a Theme ScrollTrigger Express Welcome Get Started in 3 Easy Steps Scrub and Pin Pinning and pinSpacing Overview Pinning Deep Dive Pin Spacing Pinning Car Project Intro to Parallax Scrolling Aerial SVG Car Parallax ScrollTriggers for Multiple Sections Smooth Scrolling with Locomotive Scroll Prevent Scroll on Fullscreen Intro Back to Top Link: fastScrollEnd and toggleClass Change Nav Color on Scroll Change Nav Color on Scroll: Part 2 Responsive Scroll-Based Reading Progress Bar ScrollTo Plugin and ScrollTrigger (Animated Jump Links) ScrollTrigger Toggle Animations 4 Ways Responsive Scroll-Driven Line-by-Line Text Effect Part 1 Responsive Scroll-Driven Line-by-Line Text Part 2 Off-Screen Reset 3D Rolling Headers Slide-in Panels Layered Pinning Layered Pinning from Bottom SVG Mega Scroll and Follow Use ScrollTrigger Callbacks to Control HTML5 Video Scoll-Driven SVG Path Follower Part 1: File setup, Alternating Rows and ScrollTrigger Basics Part 2: Offscreen Reset Part 3: Mobile Layout SVG Animation with GreenSock Welcome! Course Status Updated 11/19 Animating the Guts of an SVG with GreenSock Style SVG with Attributes and CSS Exploring More Shapes and Line Styles with Boxy SVG SVG Path Element: Bezier Curve Commands SVG Groups and Applying Transforms SVG Text: Using Custom Fonts Understanding transformOrigin and svgOrigin Project: SVG Basic Banner SVG Strokes: linejoin, linecap, and miter-limit Avoiding Weird Glitches with Line Animations Don't Animate tspan Elements Character by Character Animations Part 1: Characters as Paths Character by Character Animation Part 2: Characters as Text SVG Text on Path SVG viewBox and viewport Understanding preserveAspectRatio: Putting Skinny Rectangles in Squares preserveAspectRatio Part 2: Recap and Examples Marching Ants: Intro to dasharray and dashoffset Drawing Animated Lines Using DrawSVG Plugin DrawSVG Mastery Adding Custom Split Points with Boxy SVG Recreating GreenSock.com Jelly Nav Introducing SVG Clip Paths Animating SVG Clip Paths Introducing SVG Masks Animating SVG Masks: Reveal and Hide Text SVG Masks: Spotlight Effect Clip and Mask: Feathered Colorize Effect Welcome to Programming SVG Building the Worst SVG Drawing App SVG Background Generator (blend modes, gradients, random start time) B-sides, Bonuses, and Oddities Laziest Response Slider Using repeatRefresh Responsive Full Screen Circle using CSS VMAX and Edge to Edge Text Curved motion using different eases for x and y Reveal dots while animation plays Constant Speed with Random Motion Directional Rotation Bug Race in a Single Tween Bug Race Complete: Jerk Level and Weighted Random Values Hacking Ease Curves Basic Animated Counter using Snap Plugin Customizable and Re-usable Counter Effect Auto-close open item // reverse current timeline Animated Snow using Interpolate Favorite Mask Effects Using Clip-Path in a Custom Effect for Multi-directional Wipes Hard Edge Gradient Animated Fill Mask-Up / Scale-Down Effect: Chevy Tahoe Ad Exploration Mask-Up / Scale Down Part 2: optimizations and registerEffect() Text Mask Effect Using Blend Modes 3D Card Flip Effect (double-sided) Interactive 3D Card Flip 3D Card Flip Basic Game Responsive Hover Nav Gallery with Burn-in Effect Image Comparison Tool with Draggable Gradient Filled Text on Scroll Intro to ScrambleText Plugin Staggered Text Effect with ScrambleText Creating distinct enter and leave animations with a single timeline Circular Distribution of Elements without much Math Ferris Wheel: Counter-rotation to keep spinning elements upright Interactive Peacock with Modern GreenSock Banner: Clean loops and custom end screens : Part 1 Callbacks Banner: Clean loops and custom end screens : Part 2 TweenTo() Multiline Text Mask Effect (overflow hidden) Part 1: Basic setup Multiline Text Mask Effect Part2: Responsive Using CSS Clamp for Responsive Text Sizing Zero-Duration Tweens and set() Zero-Duration Tweens Part 2: addPause() Gallery with AutoPlay Part 1: File Setup / Basic Functionality Gallery with Autoplay Part 2: Toggle Switch Breaking Free of the Timeline Mindset: Part 1 Breaking Free of the Timeline Mindset Part 2 Breaking Free of the Timeline Mindset Part 3 Creeping and Jumping Dots Physics Plugins Part 1: PhysicsProps Physics Plugins Part 2: Physics2D Rotating Input Dials (SVG) Challenge: Slime Conveyor Belt Solution: Slime Conveyor Belt Constant Loop with Return to Start Drop Down Descramble Part 1: Technical Exploration Drop Down Descramble Part 2: Building the Animation Animating background-size cover and contain Constant Loop with Return to Start: Part 2: Smart Reverse Staggered Bars Wipe Transition Ease-based distribution of start times GSAP 3 Express Free Trial Ad Zim Splat 3D Inverted Cube Spinner getRelativePosition() Spinner Demo One Line of Code Mega Demo Apply a CustomEase to a MotionPath Tween How I Built my CustomEase Visualizer Pixi Circulator Beta Pixi Sweet Corn Pixi Circles Top and Bottom Dynamic Text Effect Self Playing Dynamic Interactive Text Effect Special Eases SlowMo Overview In Your Face Effect Whirl-Around Text Effect RoughEase Overview Scary Flicker Shiver Configure an elastic ease Steps Ease for Spritesheet Animations CustomEase Quick Start Unlock all these lessons for only $67 (expires Jan 1)
  23. Hi @iamjonas and welcome to the GreenSock forums, I wasn't able to follow your code closely enough to really ascertain if there was a problem with autoRemove children, however as a general principle I avoid timeline manipulation like this when dealing with user interactivity. It is usually much more bullet-proof to generate your animations fresh on the fly then move existing timelines into other timelines while trying to restart the animations that you just added. As @mvaneijgen noted these things can be troublesome until you find the "right way" and along that journey we all try things that seem like they should work but are more complicated than necessary so don't sweat it I haven't used jQuery in awhile but I think you can get closer to accomplishing your goal with this type of approach https://codepen.io/snorkltv/pen/ExpjWGj?editors=1011 The app starts out by defining a currentContent variable that will eventually point to the current content on the screen. Until anyone clicks anything, currentContent is undefined. The basic premise is that every time you click a button you get its index and then see if the item in the contents jQuery Object at that index is the same as the "currentContent" (content that is displayed) if they are the same then nothing needs to be done. if they are not the same then pass the object that is in the contents jQuery object at that index into the animateIn() function. The animateIn() function then animates in the thing it should and if there was a previous currentContent it animates that thing out. The thing you just animated in becomes the new currentObject. rinse and repeat.
  24. Carl

    Zooming SVG viewbox

    @Rodrigo thanks so much for the kind recommendation regarding my courses. @NickNo it looks like you have a good understanding of animating the SVG viewBox. Thanks for providing such a nice demo to work with. I don't have a lot of time to rework this or go over every aspect but hopefully the following will help a bit. When it comes to interactivity like this it can often become troublesome to manage the states of multiple pre-created tweens especially since each of your 4 tweens are animating the same thing (viewBox of the svg). There are a few variations of how to approach this but the end result should be something that creates the animations that you need when you need them. In your case you should create animations when the user clicks on things. Since you provided all of the viewBox settings I went ahead and added them to each group as a data-box attribute <g id="A" data-box="40 40 400 400"> <circle fill="#FF0096" cx="131" cy="130" r="78"/> <g> <path d="M125.3,145.7c-2.3,2.9-7.9,2.9-16.6,0c-1.9-0.9-2.7-2.6-2.6-5.2c1-15.9,7.4-29.7,19.1-41.4c3.3-2.8,7-2.1,10.9,2.3 c10.6,14.3,15.6,28.1,15.1,41.3c-0.7,4.5-5.9,5.7-15.6,3.8c-2.8-0.7-4.4-4.3-4.7-11c0,0-0.9,0-2.6,0 In the js I create an array of all your groups called btns and loop through it and give each button a clicked property of false a click eventListener that checks if the clicked property is false if false then tween to the viewBox to this btns data-box value and set clicked to true if true then tween back to the default viewBox view and set clicked to false const btns = [A, B, C, D] btns.forEach((btn, index) => { btn.clicked = false; btn.addEventListener("click", ()=> { console.log(btn.dataset.box) if(!btn.clicked){ gsap.to(Wall, {attr:{viewBox:btn.dataset.box}}) btn.clicked = true } else { btn.clicked = false gsap.to(Wall, {attr:{viewBox:"0 0 800 582"}}) } }) }) https://codepen.io/snorkltv/pen/WNKvRaj?editors=0010 That gets a bit more complicated as you will have to tie multiple animations together and you have to deal with situations where the user may click fast like: click on A and then B but while A is zooming out they then click on C.