Animation images and text

[Mary Pieroszkiewicz]

I'm beginner with GSAP. Thank you for the tips and help in achieving these effects.

 

 

See the Pen NWqXVjR by mary_pieroszkiewicz (@mary_pieroszkiewicz) on CodePen

[ZachSaucier]

Hey Mary and welcome to the GreenSock forums! 

 

Unfortunately we don't have the capacity to create every effect that people request here in the forums for them. If you need help with a specific part of your project, can you please create a minimal demo as described in the thread below? Using CodePen and isolating only the relevant parts of your code would make it more more likely that you'll get a response from this forum:

 

[Mary Pieroszkiewicz]

Thank you for the tips.

[ZachSaucier]

Thanks for the demo! What's the specific question that you have?

[Mary Pieroszkiewicz]

I have a problem with the text, how to make the text ejected and returned to the original position and then immediately another text came out and retracted (returned to place)

 

[ZachSaucier]

I'd use a GSAP timeline. Have your text in the DOM and then do the same animation for both sets. Using a timeline will automatically sequence the animations one after another. 

 

The basic setup I'd use is something like this:

See the Pen wvapNdG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you have more than a couple of sets of words, it might be worth creating a GSAP effect and using that + looping to make it easier to understand and more maintainable. 

 

I highly recommend reading our Getting Started article, the post on creating smarter animations, and the article on the position parameter:

https://css-tricks.com/writing-smarter-animation-code/

 

Happy tweening!

[Mary Pieroszkiewicz]

Eternal gratitude for help, and for additional information. Thank you very much ❤️

Another issue is the change (transition) of images as it is shown in the video that I attached in the post ...

[ZachSaucier]

Again, I'd use a timeline. Scale down the image, move it up, fade in whatever you need to fade in.

[Mary Pieroszkiewicz]

Thank you for the tips.

[ZachSaucier]

Hey @Mary Pieroszkiewicz. Images can be treated exactly like other elements! GSAP doesn't care that they're images, it will move them around as you tell it to. 

 

Unfortunately we don't have the capacity to complete each step of your project. Please read the information above, try it yourself, and if you have a specific question then please ask. 

[Mary Pieroszkiewicz]

Thank you for the tips.

[ZachSaucier]

7 minutes ago, Mary Pieroszkiewicz said:

I can't change image...

What do you mean "change the image"? Do you mean animate the image using GSAP? If so, you should probably pass the selector text for the image (either the img element or the figure depending on what you're wanting to animate) to a new GSAP tween.

 

If you mean changing out the image for a different one, that's a whole different question.

[ZachSaucier]

Also please use the "Fork" button in the bottom right of CodePen when making edits. That way previous versions of your demo are still visible for others to see in the thread when other people view it.

[Mary Pieroszkiewicz]

okay

[ZachSaucier]

13 minutes ago, Mary Pieroszkiewicz said:

I can't set the last element like in the video

Thanks for the updated demo. What do you mean "set"?

 

It looks like you started using the old format for duration, putting in its own parameter instead of within the vars parameter like we suggest doing. I highly recommend that you read through our Getting Started article that I linked to above. It has the most up to date formatting and will teach you step by step how to do things. 

 

Also note that you don't have to pass in an element reference to the tweens, you can just pass in the selector string like I have been doing.

[Mary Pieroszkiewicz]

Why doesn't work the animation - ball and device.

 

See the Pen NWqXVjR by mary_pieroszkiewicz (@mary_pieroszkiewicz) on CodePen

 

Thank you for help

[ZachSaucier]

57 minutes ago, Mary Pieroszkiewicz said:

Why doesn't work the animation - ball and device.

The animation is working! But you can use your developer tools to see that the images' heights are 0px tall so you can't see them. This is because you have position: absolute but didn't declare a height. Maybe you want something like height: 100% on .anim__img?

[PointC]

Also looks like CodePen is not loading those images as they are coming from an unsecure site.

 

Just my two cents, but those images are huge. 3458X4320 and 2381x4320. Might want to adjust that.