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. The solution from @OSUblake should be all you need. 👍 Here's a slightly different approach I had laying around in case it helps. Instead of looping through all the animations to see which one to reverse I keep track of the currently open (or active) item with an active variable. Every time you open something you check to see if there is an "active" element. If yes, close it by reversing its animation and then update the active variable to reference the thing you just clicked on. In this example there is a dedicated close button for each element (which you may not need). https://codepen.io/snorkltv/pen/YzGpXWO
  2. Hi Celli, You were really close. You were already accessing the dataID and you had a label inserted with that dataID so the trick is just to play() or pause() at that label like so tl.pause(dataID) timer.pause(0) The way you have things set up you have no way to turn off the autoplay (yet) so I chose to pause the timeline and the timer just so you can see the buttons kind of work. demo with hard-cuts to each slide using buttons (auto-play disabled) https://codepen.io/snorkltv/pen/wvqJEQY?editors=0010 Also in my course B-sides, Bonuses and Oddities (which you have) I have a 2 part lesson showing how to build out a timeline like this with autoplay and interactive buttons. Look for the lesson Gallery with AutoPlay Part 1: File Setup / Basic Functionality And to do things the way Jack suggested, I have a 3 Part series immediately following those lessons called Breaking free of the timeline mindset. It walks you through building a gallery with non-linear navigation that supports "in and out" animations on each slide and an autoplay feature. Keep up the great work. There's a dozen ways to do this stuff and sometimes you just have to pick what you're comfortable with and go from there.
  3. great to see you applying what you learned in the courses to your own projects! I didn't have any trouble removing the GSDevTools line. However, I don't think you want that position parameter of ">-50%" see if this works for you https://codepen.io/snorkltv/pen/JjyXmXg?editors=0010 for others watching. the animation in question was the text "testing testing testing" near the bottom. it seems like it is being triggered properly now
  4. hi and welcome to the GreenSock forums. thanks for the demo. if you want no space between the rows and you want them both to be pinned and play simultaneously you can put all the animation in one timeline and use the ".projects" element as the trigger like this https://codepen.io/snorkltv/pen/bGrVrKa?editors=1010
  5. Hi and welcome to the GreenSock forums, Thanks so much for the clear demo. You can use an onComplete callback to apply clearProp:"all" to remove the inline styles. Be sure to inspect your box after the animation runs in the demo below https://codepen.io/snorkltv/pen/bGrVwxv?editors=1010 more on clearProps: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#h3-clearprops this video on callbacks and scope may help too
  6. Carl

    Burger navi animation

    Hi and welcome to the GreenSock forums, thanks for providing the demo. it seems your animation is set up to start with the menu open and then close it. I forced the animation to it's end (closed state) using progress(1) at the end of the timeline. it also seems your css is set up so that the page loads with the menu items visible. I set the opacity to 0 in the css and toggle it back to 1 once the page is loaded using gsap.set(".menu-overlay", {opacity:1}) https://codepen.io/snorkltv/pen/PojVQLv?editors=0110
  7. Yes, scrollTo plugin can work fine in a timeline. However, you also have a ScrollTrigger on the timeline with toggleActions that tell that same timeline to pause when the trigger area leaves. In short, you are creating a logical impossibility. if ScrollTrigger pauses the timeline onLeave, how can the last tween that has the scrollTo settings ever play? See problem? You may want to put your scrollTo behavior in tween that gets fired in an onComplete callback that gets fired when the timeline completes. Still, it sounds a bit awkward to have the user scrolling to trigger the animation and then have the page try to automatically scroll somewhere else. If you need more help with this, please provide a minimal demo.
  8. Hi Nick, I checked your demo and the dot navigation seems to work fine. Perhaps you fixed it? Carl
  9. no problem. we all make those mistakes every day. it's the fun of being a developer. glad you got it working. SlowMo is my favorite ease. Here's a fun demo https://codepen.io/snorkltv/pen/KKWBaYW?editors=1010
  10. judging solely from the code you provided you have a typo in that you are missing the closing ) and you probably should use leading 0s try gsap.to('.box', 3,{x: 1000, ease: "slow(0.1, 0.7)"}); and it looks like you are loading EasePack from 2 sources. just use 1 of them
  11. Carl

    Tween around circle

    This demo here is from one of my lessons. It uses one of the technique's @GreenSock suggested. I create a circleHolder (red line) and put a circle inside it to the right. I then rotate the circleHolder and counter-rotate the child circle (using negative rotation of the parent). https://codepen.io/snorkltv/pen/MWopvBX?editors=0010 You could edit the css of course to hide the red lines. From there we build this nice ferris wheel https://codepen.io/snorkltv/pen/qBRwvgp For easy responsiveness, @Cassie is correct, SVG would be the way to go!
  12. Just chucking a fun bonus here to bring a few more eyes to this fantastic deal. Last week I came across this tweet from @kenneyNL showing this interesting contraption that "controlled" an animation. I became instantly enamored with the playful animation. The synchronization with the "inputs" was so perfectly executed that I had to wonder if the device was real. I also loved the fact that the artwork was so incredibly simplistic (low detail) but conveyed so much emotion and life. With all those great attributes it was just screaming at me to be rebuilt using SVG and GSAP. I knew the rotations, color changes, face-reveal stuff would be dead-simple to animate and choreograph with GSAP, but I was very intrigued with the scattering of the little circles. Attempting the "random" scatter I needed random positioning and sizing of the circles around bob (my name for the character) but not behind him. There was no point generating circles that I couldn't see nor did I want to have 90% of circles bunched together off to one side. I decided I needed a "sort-of-circular" distribution of circles around bob. I'm an "avoid confusing math and trigonometry" at all costs type of programmer so I took an approach where I generated a bunch of circles with offset x positions and then used that offset in the transformOrigin and applied a rotation. The approach came this demo from one of my lessons that uses basic <div> elements. https://codepen.io/snorkltv/pen/Bapqwmy Once I got the basic layout I needed to add some randomness and needed something that was easy to revise and test so I came up with a click-driven approach so I could rapidly test my code Click anywhere to generate the scatter https://codepen.io/snorkltv/pen/4804b10ff391109de2d70517bf9913a3 I was happy enough with the results so I re-wired the function to return a timeline that I could easily nest in my main animation sequence. Within no time I had things spinning around, changing colors and scattering circles. Finished Sequence https://codepen.io/snorkltv/pen/LYLRqPy My approach of using offsets in a transformOrigin and then applying rotation works fine with DOM elements, but SVG is a bit of a pain. As you move and transform elements their transformOrigins need adjusting. Although I kind of got it how I wanted it, the code was a bit confusing and I knew I would have a tough time explaining it if I ever used this for a lesson. After messing with "the wrong and easy way" for a few hours failing to get the exact results I wanted I bit the bullet and pasted in some trig code and found it much easier to tweak to my liking. The scatter function basically has a loop that will: initially determine evenly spaced angles then offset that angle 5 to 15 degrees in a positive or negative direction then set the circle at that angle using a random radius within a certain range then scale them so that only a few are big The end result is that there's about 3 circles in each quadrant that aren't too close to each other. After the circles are all positioned an animation is added to a timeline that shrinks them and moves them randomly. Time break-down for complete project 1hr artwork prep 2hr scatter experiments 0.5 hours building out initial sequence 2hr additional tweaking and testing 0.5 convert scatter to trig-based approached 1hr more tweaking of everything Although I have to admit it did take more time than I initially thought, I had so much fun along the way. GreenSock's timelines make it so easy to get the exact choreography I wanted. GSDevTools was invaluable when it comes to testing each part. I love scrubbing slowly to see exactly how things are positioned and how they animate. Being that I'm always focusing on new lessons for my students every week it's rare that I animate something like this just for fun. I'd encourage you to find some fun small animation in the wild and try to replicate it. It's a fantastic way to learn and keep yourself fresh. If you have absolutely no idea how to build a javascript animation sequence like this check out my courses and my special deal above. My training is specifically designed to guide you through the best parts of the GSAP API and help you build fun stuff like this. Lastly, big thanks to KenneyNL for the inspiration. Check out his twitter profile and give him a follow. He creates loads of free game assets that look amazing.
  13. Hi @PG1 Building a robust timeline visualizer would be quite an undertaking. I created a video to explain how the getChildren() method can be used to grab animations from a timeline, get their start times and durations, and then use that info to build a rudimentary visualization Once you start throwing in staggers, nested timelines, and tweens that target multiple elements things get complicated fast. This video is just meant to introduce you to some of the basic concepts.
  14. That’s a really cool effect. it looks like you are using a super old version of GSAP though. In GSAP 3 eases are functions as explained in the video below. No more getRatio()
  15. My video on Locomotive Scroll and GSAP has helped quite a few people get up and running My course ScrollTrigger Express addresses many common issues that come up in these forums and I've been going into responsive, scrolldriven animations as well as doing some helpful demo destructions. Although I do very comprehensive explanations of ScrollTrigger's core features, I wouldn't claim for it to be an "advanced" course. Id say 80% of the cool ScrollTrigger effects have more to do with having a solid understanding of building the effects with GSAP than controlling them with ScrollTrigger. But it seems you have a good handle of that stuff. I also tend to stay away from "performance" topics as there are so many variables that there is rarely a silver-bullet solution. FWIW ScrollTrigger internally has loads of optimizations to deliver amazing resuls. Also, I'm 100% confident that the next release of GSAP will have some very cool ScrollTrigger features that you will appreciate, but I'm not at liberty to discuss them. trust me
  16. You will want create a loop so you can create animations and ScrollTriggers for each header. A basic demo is available in this thread
  17. Hi Folks, I appreciate the interest in the promotion but a few people have reached out for the 50% off coupon who are not Club GreenSock members. If your status displays as "member" that means you only have a free GreenSock account which allows you to post in the forums. You are only a Club GreenSock member if you have paid for a membership and it is still active. Your profile page and hover card will both show your membership status as Simply Green, Shockingly Green, or Business Green with text or badge Hover card (mouse over your avatar) of Club GreenSock member Profile Page (click on your avatar) of Club GreenSock Member will show a badge If you send me a coupon request and I don't see your status as an active Club member I won't be able to supply a coupon. Based on the confusion, I have raised the non-member discount to 20% off with code: gsforums. Join CreativeCodingClub.com Hopefully this helps clear things up. Carl
  18. *** UPDATE 9/10/21 THIS PROMOTION HAS ENDED *** Hey All, I'm doing a test run of a special promotion for all Club GreenSock members (Green, Shockingly, and Business). If you've invested your money in the awesome bonus plugins and the ongoing support of the platform I'm happy to offer you 50% savings on Lifetime access to my comprehensive and extremely specialized GreenSock training available at www.CreativeCodingClub.com. For those that don't know, I've spent nearly a decade in these forums and 7 years working at GreenSock helping folks learn the ins-and-outs of the platform. The Creative Coding Club courses are in simplest terms a collection of all the tips and tricks I've learned throughout the years helping frontend developers excel at GreenSock animation and avoid common beginner pitfalls. Unlike typical "one and done" courses, the Creative Coding Club is a subscription-model that gives you access to 5 premium courses PLUS new lessons every week (over 120 now). If you've spent any time in the GreenSock docs or these forums you've probably encountered my videos and demos so I'm not going to bombard you with a hard sell... just a killer deal: 50% off a Lifetime Subscription to Creative Coding Club (exp 9/8/21) To get this deal you just have to send me a Personal Message (PM) through the GreenSock site requesting a coupon code. Once logged into the GreenSock site follow these instructions Once I receive your message I'll confirm your Club GreenSock membership status (by viewing your profile) and send you a coupon code. I'll do my best to get it to you quickly (within 2-12 hours), but understand I do sleep and work Please review the following before purchase: This promotion is being run by Creative Coding Club. GreenSock isn't involved with the selling, maintenance, or delivery of this training. I offer a 28-day 100% money back guarantee. Just send me a note requesting a refund and it's yours. This offer is only available to new Creative Coding Club students. This offer is only available to people with an active Club GreenSock membership. This offer is only available to 1 member of a Multi-Developer Club GreenSock account. Contact me for info on team plans. You must request your coupon prior to 9/8/21. Coupons must be used before 9/15/21. Let's keep this simple. If you're a Club GreenSock member and ready to commit to mastering the art of GreenSock animation through my Creative Coding Club courses and weekly lessons, send me a personal message (as outlined above) and I'll get you going. Carl *** UPDATE 9/10/21 THIS PROMOTION HAS ENDED *** Not a Club GreenSock member? Well, this is the best time to join Club GreenSock, gain access to the bonus plugins, AND grab this incredible deal on my training. Remember, to get 50% off my training you must be a Club GreenSock member prior to enrolling. If you're not a Club GreenSock member but still would like me to guide you on your training journey I have a little something for you too. Save 20% on 1 Year or Lifetime memberships to Creative Coding Club (exp 9/8/21) Visit creativeCodingClub.com Select 1 Year or Lifetime plan Use code: gsforums at checkout
  19. Here's a bonus demo for you from my course ScrollTrigger Express Once you build your ScrollTriggers for each element in the loop, you can target child elements using querySelector() This demo might help if you want to animate multiple items in each blog post section. https://codepen.io/snorkltv/pen/b0b8e9c4a880b97379630f2ab9561407
  20. hi and welcome to the GreenSock forums, The demo below is from one of my courses. Feel free to study and borrow what you need. The basics idea is that 2 tweens are created using the same duration. One of them has an onComplete that passes the target into a function that creates a new set of tweens. https://codepen.io/snorkltv/pen/jOrKwwX
  21. my advice would be to create 1 timeline that does the full circle animation. tween the progress of that timeline to any value you want below the progressTl shows the syntax for tweening the progress of the circle's timeline (tl). you can create tweens any way you want and pass them the progress from the data attributes or whatever. https://codepen.io/snorkltv/pen/mdmYVEL?editors=1010 hopefully this points you in a direction that works for you. also, if you just need to animate the stroke of a circle, it would be much easier using DrawSVG:
  22. just to add another option to the list. with yoyoEase you can optionally have a different ease on the repeat. I think the elastic is a bit aggressive https://codepen.io/snorkltv/pen/bGWZqRN
  23. Welcome to the forums Thanks for the demo. You were pretty close. The biggest thing to fix is that you need to find the title and text in each section. Notice how I use querySelector on each section in the the loop https://codepen.io/snorkltv/pen/BaRMGNV?editors=1010 My course ScrollTrigger Express has a video explaining exactly how to approach this type of project. Here is a demo I use to teach this approach https://codepen.io/snorkltv/pen/b0b8e9c4a880b97379630f2ab9561407 Learn more about ScrollTrigger Express
  24. gsap.to(graph, { duration: 2.5, ease: CustomEase.create("custom", "M0,0 C0.46,0 0.496,0.014 0.616,0.088 0.734,0.161 0.884,0.4 1,1 "), y: -500 }) i just copied the entire tween code with custom ease and it comes in as one line (mac chrome). FWIW in all my years of using the ease visualizer I've never seen those line breaks.
  25. That's a great pro-tip from @PointC. Also, check out this video to learn the setting in the stagger object which supports staggering from "end" and "center" and "edges" https://codepen.io/snorkltv/pen/BajxopX Check out my Free Course: GSAP 3 Express for my tips like this.