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. Clever approach! Thanks for the demo. I set overwrite:true on the progress tween in the fork below. https://codepen.io/snorkltv/pen/QWdwyVg?editors=0010 Does that help? For more on overwriting check out: Handling Conflicting Tweens
  2. Hi and thanks for the demo. Nice job. One problem is that clicking on the .close_it button also fires the click on the .card You can test this by putting console.logs() in both click handlers. You'll see they both fire when click to reverse. The way around this is to stop propagation of the event (see pen below) The next problem was parents() returns an array so you need to select the first element from that array to find animation. My jQuery is a bit rusty, but the demo below should work https://codepen.io/snorkltv/pen/Yz
  3. I'm a bit confused about the exact question, but it seems like you are using spans which can't have transforms applied because they are "non-replaceable inline" elements. please see this demo and note that the span does not rotate but the div does https://codepen.io/snorkltv/pen/MWJgmXY?editors=0010 This is not a GSAP issue, it's a limit of CSS. To apply transforms to a span try setting it's display:block or display:inline-block in the css. FWIW it's just best to use divs or block-level elements.
  4. lol. then that's probably a good place to stop. Unfortunately, the many folks like @PointC that have volunteered countless hours of their time over the years don't often have the luxury of making sure that every line of code is understandable to everyone of every skill level that passes by. The original poster was already satisfied so there's really no need for a committee to come in to do a code review. If you have an alternative, cleaner solution that would certainly be a welcome addition that would add value to the thread. If something isn't clear you can simply as
  5. Hi and welcome to the GreenSock forums. It should be TweenMax.staggerFrom() lowercase s. However, TweenMax is from an old version of GSAP and is not longer recommended. If you are just starting it is best to start with GSAP 3 (latest version). This demo shows the proper way to stagger (hit the rerun button if you miss it). https://codepen.io/snorkltv/pen/NWbZwYj?editors=0110 Check out the free course in my signature, I think it will help you greatly. It covers staggers and all the basics in great detail. Carl
  6. this thread got me tinkering with background-clip:text (as iDad5 suggested). I'm going to use this for an upcoming lesson for my students in my Creative Coding Club. however, if you want a sneak peek at a not-so-ready-for-production version here you go: https://codepen.io/snorkltv/pen/6720103d55791e83f754ce7a1a7dc008 if you're on mobile, try landscape mode. the short version of how it works is that the text has a gradient that goes from black to "white" to black at a 45deg angle. I use a gsap tween to move those colors over to the righ
  7. There is a helper function for killing all tweens that are animating all child elements of any parent element you specify. Ideally all your banner assets would be wrapped in some sort of container div that you would pass into that method like killChildTweensOf("#banner") I'm curious if you really have to kill all the tweens. From the code you provided I would think just pausing the timeline would suffice. If you have loose tweens (not in a timeline) running you can also just pause the global timeline with gsap.globalTimeline.pause(). This will pause every tween and delayedCall
  8. I don't think it's logically possible to have a back ease with a tweenTo(). You can't move the playhead of a timeline beyond the end of a timeline or before a timeline begins as there is nothing there.
  9. Glad the video helped! You're welcome.
  10. Thanks for the demo. Please try setting callbackScope gsap.fromTo( cube.position,{ x: 150 }, { x: -150, duration:1, onComplete: this.finishGsap, onCompleteParams: [ this.stop ], callbackScope: this }) in the demo below the console logs true when the tween is done https://codepen.io/snorkltv/pen/LYbjYPB?editors=0010 this video may help as well
  11. Hi and welcome to the forums. It's a common logic issue in that you can't have multiple tweens in a timeline with separate ScrollTrigger's controlling them. The timeline's playhead can only be in one place at a time which is why you can't have multiple ScrollTrigger's controlling child tweens in the timeline. For more info on this issue and others check out Common ScrollTrigger Mistakes. For your example you can just have 2 tweens with their own ScrollTrigger (no need for a timeline at all)
  12. nice job, @mikel! lots of fun.
  13. sorry, that example you posted appears to be incredibly complex. I'm not at all prepared to figure out and explain how that is achieved. it appears the animation is not controlled with scrub:true. once a section is reached the animation plays on its own. Hopefully that helps. Good luck with the project!
  14. when things don't work it's important to check the errors and warnings your pen had numerous warnings gsap-latest-beta.min.js:10 Invalid property scrollTrigger set to Object Missing plugin? gsap.registerPlugin() please add this line above your other code gsap.registerPlugin(ScrollTrigger) This is necessary in cases where you are loading ScrollTrigger BEFORE gsap which is what it appears you are doing in your pen. Using registerPlugin is a best practice which is recommended to avoid these issues (as explained in the docs)
  15. To add to @GreenSock's excellent advice... The ease curve (Power4) you chose gets very flat at the end making the rate of change so small that it appears the animation has delayed. This video should help you understand how ease curves work If you want to reset the position of the h1 after it moves to the right, this is a great time to use a timeline. A timeline allows you to sequence multiple animations. With a timeline you can add a set() to a timeline to set the h1's position back to 0 https://codepen.io/snorkltv/pen/rNMEoNz?edi
  16. You have an additional semi-colon ; after stagger:0.6; which is causing an error. It isn't necessary to use opacity and autoAlpha in the same tween. I'm not sure why you switched to using TimelineMax in the second demo. I would recommend sticking with the new gsap.timeline(). If you are still beginning with GSAP3 you may find my free course helpful (see signature)
  17. Paul's solution above may be all you need and works great. In B-sides, Bonuses, and Oddities I have a lesson (with 20 minute video) that shows how to build a re-usable counter effect that makes chaining these types of animations a breeze. Here is the finished demo https://codepen.io/snorkltv/pen/NWRqmOv?editors=0010 Once the effect code is registered you can animate a counter with one line like tl.counter("#studentsCount", {end:1860, increment:10}) the effect reads the current value in the target html item ("#studentsCount"), an
  18. this demo should help https://codepen.io/snorkltv/pen/JjowpLO
  19. Hi AdulTSU, This is an interesting challenge and not too tricky with GSAP, but it does require knowing some of the finer nuances of the API. Please see this video on placing repeat in the stagger object vs placing it on a timeline or tween I was able to get what you want pretty close I think with this approach https://codepen.io/snorkltv/pen/BaLMJYP?editors=0010 The blog post below contains a lesson from my course GSAP3 Beyond the Basics which shows how to get rid of any pause between repeats https://www.snorkl.t
  20. Hi Romann, You can add or remove callbacks after a timeline is created (or whenever you want) using eventCallback and optionally pass in parameters. Someone else may have a better idea regarding then() as i'm not very familiar with it.
  21. Hi, This effect was literally the most recent lesson I added to my GreenSock course bundle. To split the text and animate character by character I would suggest SplitText. To make the text appear that it is coming from an invisible div as you said the trick is to give the parent div overflow:hidden in the css. Below is the demo from the lesson. Feel free to pull it apart https://codepen.io/snorkltv/pen/XWjZMgJ You probably want to pay attention to what is happening to the "h2" and ".tagline" Change the yPercent value to 100 (positive)
  22. Hi Shehzad, So glad you found a solution and better understanding from the solutions presented here and the course. When you put a duration in the defaults it will apply to every tween. But the engine properly ignores that for set() which will always have a duration of 0. This is proper because you could want every tween in a timeline to have a default duration and still be able to use a set() with a 0 duration. A set() has a very specific purpose: to apply values instantly. If you want to have a default duration, use to() or from() tweens h
  23. Hi Shehzad, Thanks for the demo. For something like this I would remove the ScrollTrigger code entirely and make sure the timeline plays fine on it's own. If you do that you will see that your timeline doesn't play. The reason for this is because you do not have any animation in your timeline. You are only putting a bunch of set() calls in the timeline. A set() is literally a tween with 0 seconds as the duration. Since there is no duration to each set(), each set() gets added at a time of zero and your timeline has a duration of 0 sec
  24. Hi @UbiAssassin So glad to hear that you are having success with registerEffect() I suspect you ran across my video I regularly post about this on twitter as it's one of my favorite features and I feel that it is being under-utilized by the community. It's really cool to hear you have made it a part of your workflow and you are experiencing the flexibility and time-saving features. It's important to note that @GreenSock is the brains behind bringing it into existence and of course @ZachSaucier is a big part of
  25. Carl

    Return a value

    i don't know anything about paper or alpine but you can have your onUpdate function apply object.value to the text.content your private pen wasn't forkable so paste this code function data() { var object = { value: 0 }; return { init($refs) { this.$nextTick(() => { function words(object) { gsap.to(object, { value: 20, duration: 5, snap:{value:1}, onUpdate:changeNumber }); } console.log(words(object)); paper.setup($refs.canvas); var path = new paper