Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
MstudioIL

Moving images

Recommended Posts

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

 

concept3.jpg

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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)

 

 

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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 

 

Link to comment
Share on other sites

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

 

 

  • Like 4
Link to comment
Share on other sites

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

 

 

  • Like 3
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.
×