Jump to content
Search Community

Move then tween on a path???

SLSCoder 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

I've been dealing with Irma too. :angry:

 

I noticed your comment here.

//AHH - the HtmlToSvg	Unit
var scaleX = viewportWidth  / viewBox.width;
var scaleY = viewportHeight / viewBox.height;

 

That's pretty close. But there are 2 more important values in that code, the viewX and viewY values, which affect the min,mid,max positioning.

 

Remember how I was telling you that everything is based on a transformation matrix. So in SVG, well canvas too as it uses the same matrix class, there are 6 properties a,b,c,d,e,f, and they would sort of map out like this.

matrix.a = scaleX;
matrix.b = 0; 
matrix.c = 0;
matrix.d = scaleY;
matrix.e = viewX;
matrix.f = viewY;

 

Every point/coordinate is calculated like this.

var x = matrix.a * point.x + matrix.c * point.y + matrix.e;
var y = matrix.b * point.x + matrix.d * point.y + matrix.f;

 

b and c are 0, so you can see how some of that stuff cancels out.

var x = matrix.a * point.x + matrix.e;
var y = matrix.d * point.y + matrix.f;

 

And we are left with pretty much the same code from that demo.

var x = scaleX * point.x + viewX;
var y = scaleY * point.y + viewY;

ball.style.left = (viewX + ballBox.x * scaleX) + "px";
ball.style.top  = (viewY + ballBox.y * scaleY) + "px";

 

 

 

 

 

I'll solve your game here in a minute, but here's another SVG coordinates demo. Check out the matrix values. They will only change when you resize the screen. You should be able see to the correlation between the matrix and the screen coordinates.

 

I also added some boxes with transforms on them. Notice how their values are being affected. Like the red box is set at x = 100, so there is going a difference of 100 between the svg's x coordinate.

 

See the Pen RLPOyj?editors=0010 by osublake (@osublake) on CodePen

 

 

 

  • Like 2
Link to comment
Share on other sites

Here you go. All you need is getBoundingClientRect. It's all about relativity. ;)

 

See the Pen EwjzME?editors=0010 by osublake (@osublake) on CodePen

 

I'm updating it on resize because you're using arbitrary percentages that have no relation to other values. There is no solution for that. But that's not say you can't use percentages.

 

I would say that width should determine the height for responsive stuff. If you want to get into responsive layouts, look at flexbox, the new css grid, and some of the newer CSS units like vmin, vmax, vw, and vh.

 

Look at the CSS in this canvas demo. Yeah, I'm using SCSS, but I could have used calc. It makes no difference. It's the units that make the canvas element responsive, while maintaining an aspect ratio. Canvas has no built in aspect ratio, yet it's still being maintained when you resize the page.

 

WHOOPS... had the wrong demo in there.

See the Pen 3fddde18bba54de61e71886207c1d205 by osublake (@osublake) on CodePen

 

Another demo using responsive CSS units. This one is a little more complicated as I'm dragging and dropping HTML elements inside an SVG.

 

See the Pen VmgNJB?editors=0110 by osublake (@osublake) on CodePen

 

 

 

  • Like 4
Link to comment
Share on other sites

Blake! You're the MAN!! Thanks a whole bunch. That was GOLD!!

 

I spent a day basically studying vectors and then spent time working with (practicing) positioning of svg to html and visa/versa.

I finally GET IT! I can put the SVG anywhere I want now, using getBoundingClientRect(), thanks to you.

I can put any HTML element on any svg element too.

I did notice though that with some screen resolutions it doesn't position exactly right.

Is there any way to fix that?

 

I've still got one problem. I can't move an SVG element to a specific position in the html.

I found this. About 3/4 down the page it gets close. I tried what I thought would work. It didn't.
I've studied, reviewed and tried everything I can think of - no good.
So, I created a demo to practice moving svg <-> html.
In function do6 I try to move an svg square to an html dot.
No can do. If you can help me with this one I think I've got it.

 

See the Pen RLRPjZ?editors=0011 by SLSCoder (@SLSCoder) on CodePen

 

Link to comment
Share on other sites

Hello @SLSCoder and welcome to the GreenSock Forum!

 

Looks like your codepen has an error on Line 94, so it wasn't running the code.

 

// this line is missing a dot (.) between getScreenCTM() and inverse()
var pntSq = point.matrixTransform(elSq.getScreenCTM()inverse());

// should be this with dot (.) in front of inverse()
var pntSq = point.matrixTransform(elSq.getScreenCTM().inverse());

 

Happy Tweening :)

  • Like 3
Link to comment
Share on other sites

You guys have been a tremendous help.

I can position the svg in html pretty well now - THANK YOU!
I've got 1 small problem still outstanding. Then I'm golden.

 

How can I move an SVG element (not the whole svg) to an HTML coordinate?

I've got a codepen above with a sort of practice/demo svg positioning within html.

I try it in do6 function. I've tried as much as I can think of. Help??

 

Link to comment
Share on other sites

That one is pretty advanced.

 

You can figure out the distance the div and box are from the SVG element using getBoundingClientRect. Those are global points. Now you need to convert them to into local points and find the distance between them.

 

That's the complicated part, because as I've said before, it's hard to find any good documentation on how to use these methods. This is probably the best resource I've found... a Stackoverflow answer.

https://stackoverflow.com/questions/4850821/svg-coordinates-with-transform-matrix

 

 

See the Pen WZRdBr?editors=0010 by osublake (@osublake) on CodePen

 

 

  • Like 3
Link to comment
Share on other sites

WOW!! I think I've finally got it!
Without you guys, I never would have stood a chance.

For my purposes, that would have rendered MorphSVGPlugin near useless to me.

Not so!! I can position the svg to html points, html to svg points and svg elements to html points.

 

I updated my codepen. I wanted to use it for reference in the future.

Maybe you could use it or fork it and make a better version for other people having problems positioning svg in html.

 

Blake: can I ask a personal question? How did you get that extensive education?

Your code is beautiful and your vast knowledge is obvious.

Are you a Greensock coder?

I can't figure out whether I owe you a bottle or Greensock a donation ;-)

 

  • Like 3
Link to comment
Share on other sites

Thanks @SLSCoder

 

I don't code any of the GSAP library. I mostly just help people out on the forums.

 

I would have to say that most of my knowledge comes from learning how to make games with canvas. The canvas API is very similar to the API the browser uses to render stuff, like with Skia. So if you have a good understanding canvas, you'll also have a good understanding of how the browser renders stuff.

 

And I really like your little challenges for learning positioning. I'll be sure to point other people over to your demo when they need help for something similar.

  • Like 1
Link to comment
Share on other sites

Well, I think you need to play a bit with easing effects so it will be little more exciting, at the moment everything is moving at same speed and bit too slow. When I first opened the link, background animation of door opening etc didn't show up but just tried in another browser while typing so must be my slow network. Overall it is cool, just easing effects will make it perfect. Just honest feedback, hope its not harsh in anyway.

  • Like 1
Link to comment
Share on other sites

Thanks for the feedback. I noticed that I had to refresh it on the site to make it work. I thought (hoped) that it was just a caching issue.
I'll speed it up as suggested. I've tried easing, delay and other things to smooth it out. It's responsive and I get different results at different screen resolutions.

I've tested it in IE 11, Chrome, Firefox & Opera. It's working but only as long as I refresh the screen once. I have to fix that.
Any ideas?

Link to comment
Share on other sites

Ya tried hard refreshing, well the image is too big, it never really loads when your animation starts. Maybe optimizing images, delivering gzip compressed content etc will fix it. Or you will have to use some kind of loading screen.

 

As for those icons appearing at random positions, set their position using css like normal website and animate them into view using classes so they won't contain inline styles for their x,y coordinates or use clearProps. That's all I can say, I haven't looked at the code but I think you should start over and plan few things before implementing. I would suggest to just design normal website without animation, keep it responsive etc and when site loads animate them into their positions. It will work, that's how I usually approach.

  • Like 1
Link to comment
Share on other sites

Ya now images show up and overall animation is better paced.

 

But the icons are still misplaced, and if you resize screen they go out of their places. And not just icons but the text at the bottom shows up at different positions on different monitors. It shows up correctly on FULL HD but on HD it is messed up.

 

I would still suggest you same as my previous comment, you should just position everything with normal CSS. Once you make sure everything is responsive, I mean the main content that animates into view. Then write javascript and just animate them into view using classes or using from tweens with clearProps.

  • Like 2
Link to comment
Share on other sites

Here is simple demo of what I am talking about. You can see that how the pen is responsive and I am using classes to animate those divs into place. But this is not the exact solution, it is just simple demo of how something can be done. It really depends on how you want to do it and boils down to your CSS skills. But this demo should give idea about how you should approach this whole page.

 

See the Pen MEVMwP by Sahil89 (@Sahil89) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Hi @SLSCoder

 

You can always go back to the original demo I made. It doesn't use SVG... at all. I'm manually offsetting the Bezier points, and I add 2 additional horizontal Bezier segments to the points in order to position the words off screen. That's the complicated part, which is why I was trying to steer you to use SVG.

 

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

 

Link to comment
Share on other sites

Thanks Blake. Unless you see something wrong with the animation as it is, I'm done with it :)

I've tested it in 4 different browsers on 2 different computers and 2 different browsers on 2 different cell phones.

I've learned that browsers don't do animations and download images simultaneously very well.

Sometimes they simply ignore random lines of code.

 

I think I've got it working now. Please let me know if it doesn't look OK.

SoftLink

Link to comment
Share on other sites

10 hours ago, SLSCoder said:

Thanks Blake. Unless you see something wrong with the animation as it is, I'm done with it :)

 

I did notice a slight jump at the very beginning. Not sure what's causing it. Your other animations would be smoother if you used x and y instead of left and top.

 

10 hours ago, SLSCoder said:

I've learned that browsers don't do animations and download images simultaneously very well.

Sometimes they simply ignore random lines of code.

 

Not sure about ignoring lines of code, but it's a good idea to make sure your images are loaded before trying to animate them as the layout might change. It's also a good idea to put all your scripts and code at the bottom of your page instead of the top. Just right before the closing </body> tag. 

  • Like 1
Link to comment
Share on other sites

Thanks Blake. I don't see the jump. When the Soft & Link end the moves in the straight lines and start following the arcs (2 different tweens) there is a slight jump between the end & start points. The 'numbers' are exactly the same but the browsers see 2 different positions - thus a slight jump. It jumps forward at 1200 pixel width and backward on a cell phone. ???
Yea, doors were randomly appearing in the wrong place, sometimes the big image wasn't the right size . . .

it was clearly not executing specific lines in the code - randomly and only if I cleared the cache first.
Now the doors don't appear until the big image is downloaded. That seems to have fixed it.

I recall you mentioning x & y numerous times but I never really got what you meant. How can I change left & top to x & y?

 

 

Link to comment
Share on other sites

3 hours ago, SLSCoder said:

When the Soft & Link end the moves in the straight lines and start following the arcs (2 different tweens) there is a slight jump between the end & start points.

 

Yep. That's what I'm talking about. It looks like the straight line animation is overshooting where the arcs start a tad.

 

Your animation is a little different, but I usually set whatever I'm animating to the start position of a motion path to prevent it from jumping.

 

var values = MorphSVGPlugin.pathDataToBezier("#somePath");

TweenLite.set(myElement, {
  x: values[0].x,
  y: values[0].y
});

 

3 hours ago, SLSCoder said:

I recall you mentioning x & y numerous times but I never really got what you meant. How can I change left & top to x & y?

 

Left and top may appear to do the same thing as x and y, but they are totally different. The net movement from this tween will be 200.

 

TweenLite.to(myElement, 1, {
  left: 100,
  x: 100
});

 

left and top will move an element to a new position, causing the browser to recalculate the layout. x and y are transforms, and just translate the pixels to a new position. Transforms do not affect anything and are usually hardware accelerated for better performance. Here's a good article that goes into detail about that.

https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

 

Check out the difference in movement in this video.

 

 

 

And here's a good article about doing percentage based translation with GSAP using the xPercent/yPercent properties.

https://greensock.com/gsap-1-13-1

 

 

 

  • Like 1
Link to comment
Share on other sites

Yep, I generally prefer x/y (transforms) but there are some cases when you really need some of the benefits of top/left. You mentioned that your goal was to make things responsive, and an important thing to keep in mind is that transform-related percentages are based on something COMPLETELY different - the element itself rather than its container. So top/left percentages refer to the parent element's width/height but x/y refer to the element itself's width/height, making it very difficult to achieve certain things. 

 

For example, when I built GSDevTools, I had to use a percentage-based "left" value for the scrubber and other positioning so that things lined up perfectly when the user resized the browser. I suppose you could do calculations on every resize to set the proper x/y but there are down sides to that too. 

  • Like 1
Link to comment
Share on other sites

Jack: WHAT? I very much appreciate your help. You've lost me here.
How can the size of a thing determine its own position?

From my understanding, left doesn't have anything to do with the element's container's width, it pertains to the container's left edge.

If you code thing.left = container.width that makes sense but thing could be far left of the container if container.left isn't referenced.

Can you please explain what you said? I hate to admit I'm a bit confused :)


 

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...