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. good job on your demo. check out turn.js it appears to be a free jquery plugin http://www.turnjs.com/#samples/magazine3 Unless you understand 100% what needs to be done to simulate an interactive draggable page curl like that it will probably be much better to just go with an "off-the-shelf" solution than spend 40+ hours trying to code it and debug it on multiple browsers / devices. turning a flat div/image into something that curves in 3D space isn't trivial. as you can see in the example above (using the slider or next/back arrows), adding a little gradient (as cassie suggested) in the middle does help a little.
  2. Ah looks like i jumped into the middle and didn't understand what was needed. Go with Blake's advice! 👍
  3. i may not be understanding the complexity of your code structure and which code needs to go where, but being that you are using fromTo() tweens on the same targets multiple times I think immediateRender:false may solve some of the issues. https://codepen.io/snorkltv/pen/Yzrxeyv?editors=1010 More info on immediateRender
  4. you were on the right track with using the onComplete to call a function that did stuff again. I separated the animating and generating functions so that when each drop was done animating it would call a function that would reposition it and animate it again. I was working quickly so I hacked some things up a bit. But this should show the general idea and I'm sure you can add back in some of your other things without any trouble https://codepen.io/snorkltv/pen/MWEpxbR?editors=0010
  5. Carl

    Conditional Masking

    Thanks for the nice note. Glad the demos helped.
  6. crazy to see Flip do all that heavy lifting with such little code. wow.
  7. Carl

    Conditional Masking

    Glad to hear you are enjoying GSAP 3 Express! Currently the Free Trial of the course and a handful of bonus lessons get released over the course of a week. Students who want to learn more faster have the option of unlocking all my courses (over 130 lessons) for less than $10 a month. So far it has provided a nice balance of allowing thousands of students to learn GSAP for free while I still make some money (necessary). One of my lessons covers how to loop through multiple elements and assign them an animation. When you interact with that element its animation will play or reverse. If you choose to "open" an element we use a variable to track which element is currently open so we can close it https://codepen.io/snorkltv/pen/BaLWxLW In your approach you are creating an animation BEFORE you are applying your classes that you are using to select the target of the animation. When you add and remove classes it has zero impact on tweens that you created prior. We typically don't build out full feature requests here, but since you invested the time in providing a demo that was "ready to go" and this could make for a good lesson I made some modifications to account for your recent requests. It may be a bit much for someone just starting out but it builds off the the the techniques in the demo above. In the "mouseover" event I'm looping through ALL the menu items and reversing the animations of all the elements that are not being rolled over. This is really only necessary to accommodate your request that on initial load all menu items are fully visible. https://codepen.io/snorkltv/pen/vYeybEG?editors=0011 Note, I'm not adding or removing any classes but you can add that in if for some reason it's necessary. Hope this helps!
  8. Carl

    Conditional Masking

    Also, the first example may also work with a hard-edge gradient fill on the text that gets animated. I may have to explore that further some day.
  9. Carl

    Conditional Masking

    it looks to me that they may just be animating the clipPath property. With gsap you would play() and reverse() a tween as opposed to adding and removing classes Here is a basic example using hover https://codepen.io/snorkltv/pen/oNGzKWR Here is a more advanced sequences that uses a custom effect using gsap.registerEffect() https://codepen.io/snorkltv/pen/rNMvpLq?editors=0010 Hopefully the first demo is enough for you to modify for your needs. If you need help with the second example check out my courses (link in signature) I have a detailed lesson on how it was built.
  10. Carl

    codepen RUN

    Akapowl is correct, I was in the process of grabbing a screenshot so here it is. BTW i find the UI for this kind of troublesome as I'd rather have "ENABLE RUN BUTTON" instead of turning off the auto updating preview.
  11. First, thanks for the great demo. It's rare that we see a complex scenario so cleanly stripped down to the bare necessities. I know you said you couldn't specify the duration of each timeline due to the complexity, but i just want to make sure you know that you can dynamically assign the duration when the scrolling timeline is inserted into globalTimeline. globalTimeline.add(animateScrolling()).add(animateBox().duration(globalTimeline.duration()), "<"); See if this works for you: https://codepen.io/snorkltv/pen/mdBVxxE?editors=0010 My second suggestion was to use the progress of the ScrollTrigger to adjust the progress() of the scrolling timeline onUpdate but I got funky results. Perhaps we can pursue that more if this first solution doesn't work for you and your setup
  12. you can achieve this by tweening the timeScale() of a tween. Rollover the red svg https://codepen.io/snorkltv/pen/abLbyGj?editors=1010 Here is a video with an older gsap syntax that explains the concept Check out the courses in my signature. You can enroll for free tonight. Once you enroll, my GSAP 3 Beyond the Basics course walks you through tweening the progress() and timeScale() of a tween in the first chapter and loads of other important stuff.
  13. @OSUblake boxy svg looks really cool! Thx for sharing.
  14. It's that time of year again. Everyone wants some SVG snowflakes with GSAP. Here you go! Click to pause / unpause https://codepen.io/snorkltv/pen/RwGZeZa Unlock 130 more lessons to Master GreenSock: Enroll for Free: Creative Coding Club course bundle *** Open Enrollment Ends Nov 29 ***
  15. @GreenSock thanks for the explanation. it makes sense. the ASCII art was quite helpful. Nice touch with the colors too!
  16. The topic of responsive animations comes up quite a bit around here. ScrollTrigger has built in tools to make it easier than ever. Check out the promo video for my Responsive Animations with ScrollTrigger 3-Part Series Enroll for Free: Creative Coding Club course bundle
  17. Hey Folks, Some may say I'm crazy but I've decided to unlock nearly 3 years of work for a limited time to help you on your way towards mastering GSAP. That's right, my entire Creative Coding Club course bundle now has FREE open enrollment for a 30-day trial. No credit cards or funny-business. Just full access to over 130 lessons that were largely inspired from the questions I've seen people ask in these forums. My 9,000+ posts here and 6-ish years working at GreenSock gave me the experience to create training that will hopefully keep you out of these forums and get you quickly on your way to making wonderful animations on your own. If you have struggled with the basics, have trouble applying what you see in the docs, or need to take your skills to the next level I guarantee there is something of value for you in this bundle. Jump on in today, risk free, assess the value for yourself. Open enrollment won't last for long. And of course those that act quick can get some ridiculous Early Bird Black Friday savings before Nov 22. Enroll Today For Free! Hope you enjoy the lessons! Carl Below is a demo that highlights some of my favorite learning tips https://codepen.io/snorkltv/pen/WNxeWWZ Animations like this will be a breeze to create after you've spent some time with my training
  18. I don't have time to build this out for you, but I cover loads of this stuff in my courses (see sig). Here's a demo from one of my lessons that shows that you can click each pill to open it. The basic idea is each "expander" has its own animation that can be played or reversed. You need to do the same thing with your setup inside a loop. https://codepen.io/snorkltv/pen/YzGpXWO?editors=0010 Give it a try. If you have trouble I can maybe jump in later or tomorrow.
  19. Sorry, there's no way for me to know where the conflict is with your setup. Before you add this code you could console.log(tween) to see what it actually is. Also you could rename your tween variable to something else (animation, harold, whatever) and see if that resolves it. WIth the gsap version I was referring to the deprecated syntax you were using with TimelineMax (prior to version 3) Always good to use the latest version of gsap 👍
  20. doh! sorry about that, totally missed that in the initial post. see how this works. I basically set the tween up to check to see if you are hovering or not to see if it should keep playing every time it gets back to its starting position. https://codepen.io/snorkltv/pen/bGrLQMM?editors=0010 @GreenSock I found an odd behavior here. When the tween plays forward through the first iteration and then yoyo's back to the starting point the progress() of the tween is 0, yet calling play() doesn't advance the playhead forward. I had to call restart() to get the tween to advance. Note it's important that I have the play() in there too
  21. Hi and welcome to the forums, Thanks for providing the demo. It looks like you forgot to include gsap, but that's ok. It also looks like you are using an old version of gsap as there is no longer a need for timelinemax. Be sure to check out the migration guide. the main issue with your setup was that you were creating new timelines on each interaction. I'd suggest creating the tween or timeline once and then just use the buttons to control it. https://codepen.io/snorkltv/pen/qBXxJvG?editors=0010 If you need help getting started and migrating from old GSAP check out my free GSAP 3 beginner's course. https://www.creativecodingclub.com/courses/FreeGSAP3Express
  22. 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
  23. 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.
  24. 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