Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Carl last won the day on May 28

Carl had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. Hi @limbo After pondering this thread I figured it was worthwhile to explain why 2 timelines doesn't work so well and also show a "single timeline" solution. I made a video that premieres pretty much now... Here are some demos Simple https://codepen.io/snorkltv/pen/MWJVWwy More Complex https://codepen.io/snorkltv/pen/12598b629fa6d41468fdc8e60ee896ba Multiple https://codepen.io/snorkltv/pen/MWJVYeQ?editors=0010 Enjoy!
  2. nice job, @mikel it's cool how different animations trigger from different directions.
  3. in the past I've done things where on mouseleave I check the progress() of the mouseenter animation. If it isn't complete (progress() <1) i just reverse() the enter animation. then you get into the situation where you have to decide what do you do if the mouseleave animation is playing and they quickly do a mouseenter? More conditional logic? (see mega mess below) for me, I've found its often much more trouble than it's worth to get 2 distinct, pre-created, over/out animations to play nice. another approach is that you create animations on demand; each time you ent
  4. thanks for the clear demo. firing different animations on mouseenter / mouseleave can cause some interesting logic issues and un-desirable results if not planned properly. things get can "jumpy" if you enter and leave quickly making the leave animation fire before the enter animation is finished. in this simplistic animation its not much of an issue as the animations are pretty quick. in your demo the solution is just to use restart() instead of play() on each event. When an animation's playhead gets to the end of the animation calling play() again does not pl
  5. Thanks for the demo. It clearly demonstrates the issue. I don't have an answer for you other than "maybe css vars are handled differently"... which isn't helpful. 😁. I'm sure @GreenSock will be able to give you a straight answer. Hopefully you can wait until tier 1 support resumes on Monday. Rest assured your issue will be addressed properly.
  6. Hi and welcome to the GreenSock forums, Thanks for providing the demo. Your carousel is pretty cool. Unfortunately it isn't set up in a way that makes it easy for ScrollTrigger to control it. The only way to change slides is to click a button. ScrollTrigger typically controls a timeline's progress as you scroll. You don't have a timeline. You have 3 buttons doing specific animation actions. I see some options for you Option 1: recreate your carousel so that all animations are in a single timeline and hook it up to a ScrollTrigger
  7. Hi and welcome to the GreenSock forums, I can't tell from the image you provided what is wrong. Are you getting an error? Do you have any gsap code that references CustomEase? Have you created a CustomEase? I think watching the videos will help considerably. Please watch the Getting Started Video. Happy to help if you can provide a question that clearly explains what trouble you are having.
  8. Hi and welcome to the GreenSock forums. So glad you provided a demo with most of it working. Saved me loads of time! The trick here is that we are not going to add the stars scene1() animation to the main timeline. We are going to add a tween that does a tweenTo() on the stars animation for 5 seconds (or any time you want). Note that scene1() now just returns a timeline. I added GSDevTools so that you can see that the main timeline has a finite duration https://codepen.io/snorkltv/pen/JjErJvP?editors=0010 This video explains
  9. Sorry when you said you only wanted to increase the size of the div I thought that is all you had trouble with. if you want the line to grow as the orange panel scales you would then need a timeline with 2 tweens (1 for scale of panel, 1 for line). You would then attach a ScrollTrigger to the timeline https://codepen.io/snorkltv/pen/oNBGzOE?editors=0010 If you aren't familiar with building timelines please check my free GreenSock course GSAP 3 Express. It will help a lot.
  10. There is a little twist to this. When doing ScrollTrigger animations it's important that you don't animate the trigger. The trigger's size and position is critical for calculating when scroll-driven animations begin and end. If you resize the trigger then ScrollTrigger could get a little wonky. In the example below only the orange panel changes size as requested. You will note I wrapped the orange panel in an .orangeWrapper which I use for the trigger. https://codepen.io/snorkltv/pen/oNBGzOE?editors=1000
  11. the reason the master timeline appeared not to be repeating is because each child timeline had pause(2) in it. that just pauses the timeline at a time of 2 seconds https://greensock.com/docs/v3/GSAP/Timeline/addPause() if you want some dead time between tweens in a timeline, use the position parameter. I made this fork and removed some tweens just so you can see each timeline playing in succession. feel free to edit those timelines to do whatever you like with the timing and property changes. https://codepen.io/snorkltv/pen/JjEyPMx?editors=1010 a
  12. it looks like your function changeColors() is returning itself function changeColors(i) { var circle = "#circle" +i; var txt = "#txt" +i +" > path"; var change = new gsap.timeline(); change.to(circle, 1, {fill:"#01ac4e"}) .to(txt, 0.5, {fill:"white"},">") .addPause(2) .to(circle, 0, {fill:""}) .to(txt, 0, {fill:""}); return changeColors(); // should be return change } You probably want it to return the change timeline
  13. this demo by @OSUblake may help with some of it. https://codepen.io/osublake/pen/XJQKVX it looks like you would have to add code that leaves the original in place. this pen by @Rodrigo shows how to make copies of the thing you are dragging, maybe it will help as well. Drag the numbered blue divs around. https://codepen.io/rhernando/pen/mJqwZq
  14. Sorry, but I have no way of knowing what could be wrong. If your target isn't found my only guess is you are running your scripts before the DOM is present. Try loading your js at the bottom of the page in this order gsap scrolltrigger your custom animation code that you wrote
  15. Thanks for the demos. There were a few problems: the start position of the triggers was above the scroller-start on page load. In the demo below I added padding to the container to push the listones down the page didn't have enough content or height to scroll anywhere. I gave your body a height of 500vh to make it scrollable you were chaining a .to() tween to another .to() tween which is not allowed. Maybe you want a timeline? I commented the bad line out in the demo below you will see some animation when you scroll now https://codepen.io/snorkltv/pen/XWp
  16. Carl


    No problem, that’s why we’re here. Glad the solution helped.
  17. Carl


    hmm, it appears your image wasn't loading in your pen. your code was doing what it was supposed to. the opacity of the image was 0 until the tween ran. i'm guessing you want your tween to be initially paused on page load and only shown when you mouseover? https://codepen.io/snorkltv/pen/jOyqPNP?editors=1010
  18. cool! btw you can find all the utility methods here: https://greensock.com/docs/v3/GSAP/UtilityMethods
  19. this seemed like an interesting challenge. hopefully the following will spark some ideas to help you get it to the finish line. First, it's important to note that GSAP has loads of API hooks and utilities to make seemingly complex effects fairly easy without doing any tough math. By using gsap.utils.distribute() and staggering from center you get stuff like https://codepen.io/snorkltv/pen/yLyqVWQ Rubberbander lesson from GSAP 3 Beyond the Basics Being that you are very particular about the middle letter staying in center and all the other le
  20. the migration guide mentions that className tweens have been removed and shows how to modify the code to work v3 it seems like overall you did a good job and I'm not sure why you're having trouble with the staggers. the v3 versions look good to me... but it's pretty tough to guess what isn't happening from just looking at code. Where you have in red "what is this?" it's actually a mistake and that 0.1 shouldn't be there. A a TweenMax.to() tween doesn't have any parameters after the vars object. perhaps they had a staggerTo() there at one point.
  21. Hi and welcome to the GreenSock forums, Thanks for the demo. Great job. This can be handled a few ways, but since your are doing the same stuff to the same elements in each section, you can use a loop to build a timeline for each section and then put that timeline into a master timeline. Here is an example https://codepen.io/snorkltv/pen/JjEGGWJ?editors=1010 hopefully its clear enough to understand what is happening I would avoid the pseudo selectors because since you are animating a css rule, anything you do to that rule gets applied t
  22. thanks for the demo. there was an error saying ScollTrigger.scrollerProxy() was not a function. That is because you were using an old version. scrollerProxy() was added in 3.4. you also omitted the scroller property when you created a ScrollTrigger for each video. in order for the video to play on scroll without any prior user interaction it needs a muted property. I added this for you. https://codepen.io/snorkltv/pen/ExZjexm?editors=1010
  23. no, worries. we all make mistakes. Below is a demo from my FREE GSAP 3 Express Course which has an intro on SplitText and loads of info on staggers. With GSAP 3, there is no need for staggerFrom() as stagger is now a property of all tweens. https://codepen.io/snorkltv/pen/NWqYKYN If you are migrating to GSAP 3 or just starting out I think you will find the free course very useful Carl
  24. Hmm, it seemed to hold up well in my quick tests, but I don't doubt you. Have you tried removing all the custom velocity-based stuff? My suggestion would be to roll-back and get it working with more basic features and then see where it breaks. Unfortunately, I don't have the time to jump in there and do deep debugging. Glad you liked the overwrite video though! @GreenSock can speak better to the change in overwrite modes for GSAP 3. I'm pretty sure the default of true requires less overhead and better performance. Carl