Moving images

[MstudioIL]

The client has other idea they and to do.

They want to have one spinning object and background image, I create these.

They want to take 4 simple images and moved them from the corners of the screen to center of it and make the images smaller as they move until they disappear.

The image I attach have 4 images on the corners and these need to move to the center.

It is something like was been in the past with flash

 

[GreenSock]

I read your question a few times, but I still don't quite understand what you're asking. Is there a GSAP-related question in there? If you're asking whether or not GSAP can animate things to different positions and scales, yes, absolutely. And the JavaScript version of GSAP uses pretty much the same API as the Flash version did. 

 

Let us know if you have any other questions. We'd love to help. 

[MstudioIL]

Hey, it is GSAP-related, I want to move the four objects on the  corners to the center of the screen.

I want to load simple images and move them to the center on the screen and while moving them make them smaller and make them disappear at the center of the screen.

if you take the window on the right-top of the image I attached, I want to move it the center and make it smaller while it move and make it disappear at the center of the screen.

(hope I explain better)

 

 

[GreenSock]

Sure, you'd just animate the x, y, and scale properties of that image element. 

 

If you need more help, please provide a codepen with the assets in place and we'd be happy to take a peek and show you how it's done. 

[MstudioIL]

I can provide link to the page, I need to test how to work with codepen.

here is link: http://noganagarut.com/new/spin/one-spin.html

 

 

[MstudioIL]

I mange to add the images and move them, the problem is when I trying to add the third and fourth images I getting error

"sphere is undefined"

Also I want to show the images above the spinning cube and make them smaller as the move to the center of the screen

I tried to use scale but it is increasing the size and not decreasing it 

 

[mikel]

Hi @MstudioIL,

 

That is a Three.js-related issue.

And I am not an expert for that.

Have you already asked in the Three.js forum?

 

Here just for testing a 'layer on top' (not synchronous) :

 

See the Pen WBKJJo by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[MstudioIL]

Thanks. it is great help.

I manage to do something like you did, if the client will like it I will improve it.

new example: http://noganagarut.com/new/spin/‏‏one-spin-with-boxes.html

It work great for the first time, but the after that the images are mess.

Other question how I add shadow under the spinning cube?

 

 

 

[MstudioIL]

Thanks for the help.

It working great.

http://noganagarut.com/new/spin/greenboxes.html

can I move the objects together on the same time?

[mikel]

Hi @MstudioIL,

 

This could be a way:

 

var all = new TimelineMax({repeat:-1})
.to('.box',time,{scale:0.5},time)
.to('.box',0,{autoAlpha:0},time,1)

master.add(green01)
.add(green02,0)
.add(green03,0)
.add(green04,0)

 

Happy tweening ...

Mikel