[How Can I Add My Project To Showcase or Demos]

Hi,

i have some nice projects that i created with gsap. What do I need to do to join the showcase-demo or codepen gsap list?

[How I Detect Visible Items On Seemles horizontalLoop()]

On 1/30/2023 at 3:19 AM, Cassie said:

Hi there - this modified demo gives you the center 'active' element.

You could change styling in the onUpdate callback - hope this helps!
 

 

Thank you so much.

[How I Detect Visible Items On Seemles horizontalLoop()]

Hello!

I want to marque images but i should select visible items and their orders.

Actually i want to make like this:

For example: visibles center element should be biggest and center, the ones next to the middle one seem one size smaller and the next rows one size smaller.

 

 

See the Pen ZELPxWW by GreenSock (@GreenSock) on CodePen

[Create a radial wipe]

On 1/9/2023 at 7:05 PM, Rodrigo said:

Hi @sawacrow,

 

You already created a thread for this particular effect, so please keep all the related questions in that so it's easier for us to track where to help you with your GSAP issues regarding this.

 

Thanks and Happy Tweening!

Thank you very much

[Create a radial wipe]

On 12/12/2017 at 2:44 PM, OSUblake said:

 

Hehe. And now you know why I hate SVG arc paths. 

 

Try this. Set the start and end to 360, and tween the end to 0. Instead of messing with the internals of the getPath function, swap the start and end parameters around in updatePath function.

 

var arc = {  
  start: 360,
  end: 360,
  cx: 250,
  cy: 250,
  r: 150 
};

TweenMax.to(arc, 3, {
  end: 0,
  ease: Linear.easeNone,
  onUpdate: updatePath
});


function updatePath() {
  // clipPath.setAttribute("d", getPath(arc.cx, arc.cy, arc.r, arc.start, arc.end)); 
  clipPath.setAttribute("d", getPath(arc.cx, arc.cy, arc.r, arc.end, arc.start)); 
}

 

 

 

 

I can't make width and height 100%, does anyone know a solution?

[Clip Path Transparent Problem]

Instead of the 2nd sea picture in the circle, I want to see the transparent background and the red area in the background.
My purpose of use: when the page is first opened, the background will become transparent and visible as the circle rotates clockwise.
like the opening on this site for example: https://asmobius.co.jp/

 

Only background image is added as "clip path". I think it's impossible with this technique. maybe there is an alternative way?

 

my codepen link: 

another example:

 

See the Pen ExpZrVm by sawacrow (@sawacrow) on CodePen

[ScrollTrigger Activate Counter]

@GreenSock Thank you!
It should work every time it is scrolled.
Also, all objects with the same class had to work.
This is how I updated it.

 

See the Pen zYLBgBw by sawacrow (@sawacrow) on CodePen