Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About NightOwl

  • Rank
  1. That explains so much. Thank you!!
  2. So I'm trying to animate all h1 elements on a page using ScrollTrigger, but running into an issue with the trigger property. Perhaps I am going about this all wrong, but my first attempt before RTFM was based on the knowledge that I can do this: gsap.to(gsap.utils.toArray('h1'), { ... backgroundColor: (index, element, elements) => (0 === index % 2 ? 'black' : 'white') ... }); I simply tried to do the same with the trigger property by using a function like so: gsap.to(gsap.utils.toArray('h1'), { ... scrollTrigger: { trigger: (index, element,
  3. Gosh, sometimes I really think I need better glasses. You are a lifesaver. Thank you, Mikel! So for future reference, to control a repeating animation with ScrollTrigger, use toggleActions. 👍
  4. I've searched through the forms and can't seem to find this documented anywhere. I have figured out how to use ScrollTrigger to play a timeline only once "start" point has been reached, however I also need to be able to pause the (infinite repeating + yoyo) timeline once the "end" point has been reached. I attempted to recreate a simple demo in Codepen, however for some reason the "start" and "end" points are way off (you will notice that the ScrollTrigger target is #div2, with start "top top" and end "bottom top", however, the start point appears at #div1 top and endpoint at #div2
  5. One more question: is there any way to switch the Morph Type for this tool?
  6. Thank you, Zach! That did the trick! If I could make one suggestion, though: add high z-index at line 69. At first, I thought this version was broken also because I could not click on it. I fixed by adding this.
  7. Hi all, We just became ShockinglyGreen, and we're trying to use the findShapeIndex() tool to fine tune an implementation of MorphSVGPlugin, but we're not having any luck due to the following error: Uncaught TypeError: TweenLite.selector is not a function at findShapeIndex (findShapeIndex.js:143) Update 1 Attempting to hack my way through this, I tried: window.TweenLite = window.gsap; TweenLite.selector = function(element) { return element; }; findShapeIndex(document.getElementById('#shape1'), document.getElementById('#shape2')); But now I get