Jump to content
Search Community

clip-path acting strange

Rizzer test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello.  Guy in the very early in the learning process here.  I am trying to re-create a seamless looping effect, inspired by this:

 



(except with 3 svg arrows in a row instead of letters)

So I've been scouring these pleasant forums about some seamless loops and clip paths and such.  I have a seamless loop roughly animated.  However for some reason, the svg rect im using for the clip path is also animating.  despite not being targeted anywhere, or its parent animating.  u can see it here:
 



Also, even though this will be happening outside of the clip-path and therefor offstage, I've been trying to constantly set() the zIndex of each arrow so when one hits the bottom position, it will be ontop of the previous one.  But I can't seem to get it to listen to my z-index commands (even via css)

Lastly, is my overall approach to this task.. in line with the best way to achieve the effect in the reference vid? This isn't more sprite appropriate since all the arrows are the same right?

I hope I conveyed these concerns clearly enough.  Any help appreciated!!
Thanks 
Luke

See the Pen ObgJpL by Rizzer (@Rizzer) on CodePen

Link to comment
Share on other sites

Hello Rizzer,

 

Here's the bad news: Currently SVG does not support z-index. The only way to have a SVG element move on top of another is to remove it from the DOM tree and place it back again.

 

And the good news is that there were just a couple of minor things wrong with your setup.

 

1) There was some sort of conflict in the clipPath name as you had its id as clippath, plus you forgot to assign the clip-path to the elements you wanted clipped.

2) Some of the proportions were wrong with your SVG, sizes and positioning. I did a little bit of a cleanup on it and adjusted the sizes and positions so that it now fits nicely.

 

Check how this fork of your pen differs from your original and you should be able to see what went wrong.

 

See the Pen aBwZOL?editors=1010 by dipscom (@dipscom) on CodePen

 

Happy tweening.

  • Like 1
Link to comment
Share on other sites

Wow Pedro, thank you so much, this has really made my morning, im very grateful for your help.  these are the nuggets I have picked up from comparing yr version, (aside from the big one about SVG not supporting z-index)

>we don't need the version, style, or xml:space attributes in the SVG element 

>I thought clipPathUnits=objectBoundingBox was necessary for the clip-path to scale in relation to the SVG, but now im seeing it as just another way to describe x/y/height/width.  its relative either way
>didn't know you assign the clip path right inside the svg to the elements you want clipped like that. Much nicer then having to assign it via css
>xPercent and yPercent is clearly the way to go.  I had caught something about it being preferred somewhere but didn't realize yet that it applied to my situation 

 

thanks again man
 

  • Like 1
Link to comment
Share on other sites

Glad to hear it helped you.

 

Comments on some of the nuggets:

 

>we don't need the version, style, or xml:space attributes in the SVG element 

You don't in the browser. In other places and circumstances, you do.

 

>I thought clipPathUnits=objectBoundingBox was necessary for the clip-path to scale in relation to the SVG, but now im seeing it as just another way to describe x/y/height/width.  its relative either way

Lots of SVG properties don't need to be set, their default behaviour covers most cases. SVG will scale nicely the moment you set a viewBox.

>didn't know you assign the clip path right inside the svg to the elements you want clipped like that. Much nicer then having to assign it via css

Some people would argue assigning it via CSS it a lot better. I guess I just didn't see you had it set via CSS.

>xPercent and yPercent is clearly the way to go.  I had caught something about it being preferred somewhere but didn't realize yet that it applied to my situation 

GSAP is full of goodies that makes life so much easier. I'm always finding new stuff. It baffles me the POWERS THAT BE have already thought of so many of those things.

  • Like 4
Link to comment
Share on other sites

Update:

So I've added the other 2 columns of arrows, and left the class names the same ofcourse, and changed my to's to staggerTo's, attempting to do everything in the same TweenMax timeline. Here is what that looks like:

See the Pen KNvrXp?editors=1010 by Rizzer (@Rizzer) on CodePen



It's kind of working, but the staggering is not behaving the way I need it to.  Instead, it plays the first bit of column 1, sits thru the whole duration of the columns anim, then plays column 2.  I need them to keep playing consistently the whole time, with the columns start points overlapping each other.

The 2 reasons why it is not behaving like that appear to be:

> there is no staggerSet() (checked out the one thread about that on here but that guys solution seems different then what i need)
>more importantly, my delay's are pointed to the delays for the anims within each column.  But i need them to be delaying between each columns anim

This suggests to me that I'm going to require a separate (nearly identical) timeline for each column, add them to a main timeline, and overlap those.  But im not sure if thats the way, or how that nesting would look.  It seems like a looping problem + needing a work around for no staggerSet(), but I don't have the pseudo code clear in my head to fix either.  Any insights?

Link to comment
Share on other sites

Hello!

 

The solution to your issue is in the position parameter and the different between the .to()/.from() method and the .staggerTo()/.staggerFrom() methods inside a timeline.

 

From the docs:

 

.from( target:Object, duration:Number, vars:Object, position:* ) : *

 

.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) : *

 

See how different the methods are?

 

The part that you need to focus on is the first parameter after vars - in a normal .to()/.from() it's the position parameter, in a .staggerTo()/.staggerFrom() it's the stagger parameter.

 

If you adjust the example pen with that new information, all suddenly works again. ;)

 

See the Pen NbvZZq?editors=1010 by dipscom (@dipscom) on CodePen

 

Why you need a staggerSet() method? You can set a bunch of elements inside an array with a single .set() method by feeding an array and it will set whatever it is you need in one go.

TweenMax.set(arrayOfElements, {...});
  • Like 2
Link to comment
Share on other sites

Dipscom... that nails my misunderstanding, once again.  I googled the staggerTo() method, checked out some threads on here, but didn't look at the docs! I guess that is because whenever I've referenced docs in other libraries, they were always hard to comprehend.  These docs aren't too bad tho.  From here on I'll google it, search the threads, then check docs, before posting.

In retrospect it makes sense that there would be a separate parameter for the time between staggers and the position on the timeline at which the tween occurs. Otherwise we would be replacing a necessary parameter/losing functionality when using staggerTo() instead of manually staggering it

 

Nuggets learned:

>time btwn staggers is different then position on timeline
>I kind of thought that.. you generally target one object per tween, and if you're targetting multiple, then you generally use a stagger.  But those are two different use cases.  You can target as many things as you want in one to() or from() tween as long as you put them in an array in the tween
>should have known to put all repeating stuff in a var...  :roll:
>being able to set a defaultEase for all tweens is awesome / similar to using putting all eases in a var but even cleaner (surprised it doesn't work with TweenMax)
>that way of creating labels via add() is nice.  I think of it as labelling a frame in flash. 
>I think I've read that setting position by label instead of seconds is easier to read, which i guess is true, going to be utilizing labels on future anims

Its still a bit weird to me why we don't need to stagger the sets(), and that it doesnt throw off the timing flow of the other staggered tweens.  So I checked out the docs there.  I like that it clarifies that set() is the exact same thing as any to() or from() tween, with zero as a duration.  But set()'s still need to occur on a precise position on the timeline.  Actually wait.  if they are an instant occurance (no duration) then maybe there is nothing to stagger.  its like flick the switch, uses zero duration, onto the next tween

Link to comment
Share on other sites

Its still a bit weird to me why we don't need to stagger the sets(), and that it doesnt throw off the timing flow of the other staggered tweens.  So I checked out the docs there.  I like that it clarifies that set() is the exact same thing as any to() or from() tween, with zero as a duration.  But set()'s still need to occur on a precise position on the timeline.  Actually wait.  if they are an instant occurance (no duration) then maybe there is nothing to stagger.  its like flick the switch, uses zero duration, onto the next tween

 

Exactly, a zero duration tween is just like a flick of a switch, therefore there is nothing to stagger.

 

It does causes a lot of headaches to a lot of people until they realize that.

  • Like 1
Link to comment
Share on other sites

Glad you guys made so much progress. Just curious why you thought that defaultEase doesn't work with TweenMax. Oh, maybe you meant that setting "TweenMax.defaultEase" isn't effective and that's true because TweenLite is the core class for the entire GSAP ecosystem (it's inside TweenMax), so that's where the defaults are generally set. But to clarify, when you set TweenLite.defaultEase it should absolutely affect TweenMax tweens as well. 

Link to comment
Share on other sites

Oh yeah, that is what i meant, "TweenMax.defaultEase" didn't work.  I thought TweenMax was the core class and TweenLite was a stripped down version, instead of TweenLite being the core and TweenMax adding further functionality ontop.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...