PointC

I almost forgot - you can also use this if you need all the coordinates:

var p = scale1.getBoundingClientRect();
console.log( p.top, p.right, p.bottom, p.left)

Hi flysi3000 ;

I think this post can answer your questions about animating symbols.

http://greensock.com/forums/topic/12232-svg-symbols-rendering-issues-in-chrome-and-ie-on-windows-7-sp1-x64/

Hi there sorciereus  ,

Try these:

if(scale1.offset().top === 0) {
minimizeShoe(); 
}

if(scale1.position().top === 0) {
minimizeShoe(); 
}

if(scale1.offsetTop === 0) {
minimizeShoe(); 
}

The first two are jQuery and the third is plain JS. The jQuery position() and offset() only return left and top properties. 

}

Hi Technics1210 ,

I took a slightly different approach to your train. It may make things easier for you.

See the Pen bEbvwP by PointC (@PointC) on CodePen

Hopefully this helps. Happy tweening.

Interesting. 

If you have a couple free minutes, I'd still recommend making a CodePen so others can see the bug. Maybe there's an easy answer - maybe not. 

Either way, it could help anyone else coming across the same problem.

Edit: PS Jonathan is the forum expert on Firefox. I'm sure he'll read this and probably have some additional info as well.

Hi Lauren Johnson ,

I'm not sure what you mean by 'not working', but there have been some discussions about some Firefox bugs:

Here's one thread:

http://greensock.com/forums/topic/11064-drawsvg-does-not-fully-draw-path-in-ff/

That thread may help, but if you'd create a CodePen so everyone could see your code in action, that would get you the best answers.

Check this out: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

Happy tweening

PS - @flash08

When you read these answers, you should also read this thread:

http://greensock.com/forums/topic/10357-text-news-ticker-animation-is-not-smooth/

It has a good discussion of getting the ticker to run smoothly in all browsers. In particular, you'll see Jonathan has set the z rotation on his pen to 0.01 to help with this.

Hey Diaco - awesome as always.

That's really cool that it only has 3 lines of JavaScript.

I look at some of your pens and think "It can't possibly be that easy" , but there it is working beautifully every time.

Hi flash08 

The amazing Jonathan has a CodePen doing just what you need:

See the Pen vDhKE?editors=001 by jonathan (@jonathan) on CodePen

Happy tweening.

Hi PeTaWeb ,

Without a CodePen, it's going to be a little difficult to fully understand what you're looking to accomplish so I'd definitely recommend setting up a CodePen. Everyone can then see your code in action. (and why it isn't working)

Check this out: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

I wasn't 100% sure what you're asking, but it sounds like you're trying to animate some elements on the slides after they come into view?

If that's the case, 

Blake has a really good example here: 

See the Pen ZbdxRx by osublake (@osublake) on CodePen

Diaco also recently posted some cool CodePens with sliders that you should see:

See the Pen XmozON by MAW (@MAW) on CodePen

See the Pen yYradO by MAW (@MAW) on CodePen

Hopefully this helps, but as I mentioned, everyone will want to see your CodePen to really be able to help you.

Hey Carl,

Now, I didn't say it was great - just a bit better - I mean, this is Adobe after all. 

I'm in complete agreement with you on some type of 'Show SVG code' button - that would be pretty nice.

I'm glad they reached out to you for feedback though. Maybe you can continue to explain things to them until they get it right. 

 I certainly hope they continue improving on this and I think they will as SVGs are gaining quite a bit of traction, but time will tell.

Hey everyone,

For anyone, like myself, exporting a lot of SVGs out of Illustrator for your GSAP animations, take a look at the new features:

https://helpx.adobe.com/illustrator/how-to/export-svg.html

Unique IDs, individual pieces can be exported and ways to minify the bloated code of the old 'Save as' SVG. Looks like some nice improvements.  

So easy & simple, but so cool Diaco. Very nice.

Good grief - that is a pretty easy solution you have there. 

Well, the more I fall down, the more I learn.

You're the man, Blake.

I thought I could add a class for the 'blue' - check for that on the press and send it down the stack if you weren't clicking on blue, but my check for .hasClass is not working. 

I see the awesome Blake is here now.

@Blake - why won't this work? 

you can just send the 'blue' box back down the stack on press.

See the Pen EVqPbB by PointC (@PointC) on CodePen

edit: whoops - that won't quite work since the 'blue' would cause the onPress to fire as well and stay below the other elements. I'm headed out for the evening so I'll think about this a bit, but more than likely, Diaco will be by with a much better solution than mine while I'm gone. He's pretty incredible.

Hi paul_ngc ,

Depending on what you're doing, you could set zIndexBoost to false, but that may not give you the result you like.

You can certainly set the z index of a single element with a button click. Draggable defaults to a z-index of 1000 so you could just set the element's z-index higher than that.

In my codepen below, you can drag the orange and green squares on top of the blue, but click the button and the blue will jump to the top.

See the Pen NGQxqv by PointC (@PointC) on CodePen

Is that the behavior you were looking for? 

Hi jitu ,

I'm not sure I understand the question. Are you looking to scroll the contents of a div or scroll to the div? Depending on what you're doing - a couple possibilities with docs: 

You can use the scrollTo plugin: http://greensock.com/docs/#/HTML5/Plugins/ScrollToPlugin/

or maybe draggable: http://greensock.com/draggable

For super smooth content, you can also add the ThrowProps plugin to the draggable, but that one is a member plugin - of course, I highly recommend membership because it's awesome to have all the cool extras. 

To get you the best answers, a CodePen would be great: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

Hi edquijano

That's just coming from your CSS with the stroke set to hex value of #444.

Set that to the green that you want and you'll be all set.

You also have two identical paths so in my fork of your pen, I animated both with a different color and stroke width.

See the Pen KdjoaW by PointC (@PointC) on CodePen

PS - anyone reading this - there is a typo in the codepen link from the OP  - it should be: 

See the Pen OyeQeK by edquijano (@edquijano) on CodePen

Very nice Diaco and congratulations on your 1,000th post.

Oh - and the stagger time was also missing (defaults to 0 )so everything was flickering at the same time rather than staggering.

Hi Kathryn ,

On your tl2 timeline, the staggerTo is going to an opacity of 1, but all the images are already at 1. If you set it to something like 0.5, it flickers.

See the Pen yYdOMY by PointC (@PointC) on CodePen

This is probably Jonathan's "beauty sleep". 

 I have a feeling that by the time I am done writing this, someone will have a pen with three examples (Blake, most probably or Diaco)

That one made me chuckle.

I know what you mean Dipscom. Usually, by the time I'm half way through reading a question, Diaco has already posted 4 awesome codepens, posted them to Twitter and probably had time for a doughnut and coffee. 

@Jonathan - nice examples. Those are really cool!

@Blake - that is mesmerizing - at first I thought the little smiley faces were going to be Jonathan's avatar.