Animate an element and a property of an element within that element

[mauro33 2 Likes (Newbie)]

Hello, 

I made the animation of an element by moving it around the screen and changing its size, but I need to modify also in the same animation the size of an object inside it. I have as parent element a tag <a class="temp-image"> and inside it an image <img>.  
<a class="temp-image">
   <img>
</a >
The idea is to change the position and size of <a class="temp-image"> and the scale of <img>.

I leave below the animation code:
in the code as I have it so far, I change the scale to the <a> tag because I don't know how to do it in the image that is inside the tag <a>
Thank you in advance for your help

const timeline = gsap.timeline();

 

// temp image movement

timeline.to(`.${tempClassObj}`, {

duration: .6,

top: (boundRect.top - 22),

left: (boundRect.left),

height: boundRect.height,

width: boundRect.width,

scale: .95,

delay: 0

});

[Rodrigo 5,416 Likes (Superhero)]

Hi,

 

Just create another instance in the timeline and use the position parameter to set it's starting point:

const timeline = gsap.timeline();

// temp image movement
timeline.to(`.${tempClassObj}`, {
  duration: .6,
  top: (boundRect.top - 22),
  left: (boundRect.left),
  height: boundRect.height,
  width: boundRect.width,
})
.to(".temp-image img", {
  duration: 0.6,
  scale: 0.95,
}, 0)// <- Will start at the same time

Hopefully this helps. If you keep having issues, please include a minimal demo in order to get a better look at what could be the problem.

Happy Tweening!

[mauro33 2 Likes (Newbie)]

 Thank you Rodrigo for your response. 
I honestly thought that your code would solve the problem but it didn't, maybe it's the code that precedes the animation. The idea of this animation is to create the illusion that the image I have selected remains as the page changes and is displayed larger on an internal page. For this what I did was to create an object when I click and disappear when I get to the internal page. This works fine but as the initial image has a hover effect that scales the image, when I create the object I have to scale it to the same size to avoid a jump between images but when I get to the internal page I have to de-scale it to normal size, this is why I want to change the scale of the image that is inside the object created in the transition. I leave a demo that I uploaded on my server (you can see an example of the problem by clicking on the first picture):
https://hallnatura.com/demo/galerie-animal.html

Thank you very much for your help

 

 

[mauro33 2 Likes (Newbie)]

I think my problem is  how to apply the scale animation to the image inside the created object. I don't know how to select it.  

.to(".temp-image img", {

This way does not work unfortunately :(

[Rodrigo 5,416 Likes (Superhero)]

Hi,

 

Without a live minimal demo is really hard to help you with the issue you're having. We can't really debug a live site where we don't have any control over the code and we can't tinker with it. Please keep your demo as simple as possible, don't copy/paste your entire project, just a few divs to clearly illustrate the problem.

 

Also you should definitely take a look at the Flip plugin, as I think it could become helpful in this scenario:

https://greensock.com/docs/v3/Plugins/Flip/

 

Happy Tweening!

[mauro33 2 Likes (Newbie)]

Yes, I understand. I'm going to upload a demo but I need to pay the pro version of codepen as I use a transition between pages so I need to create a project. I saw the flip plugin and it is exactly the functionality that I made in js with the help of gsap. I hope I can solve the small error in the code that is already done. I will write you again once I have created the demo. Thanks.

[Rodrigo 5,416 Likes (Superhero)]

Hi,

 

You can use StackBlitz for free and create a multipage project I believe.

 

I assume that you're using some UI framework lik Vue/Svelte/React?

 

Happy Tweening!

[mauro33 2 Likes (Newbie)]

I didn't see your message and I already paid for codepen and uploaded the demo, but it's not a problem if it's about fixing the bug. I am not using any framework, I decided to make the code myself since it is a "simple" page. Here is the link to the demo in codepen :
https://codepen.io/Mauro33/project/editor/XNYRVr

 

Thank you very much for your help

[iDad5 214 Likes (Specialist)]

Hi, I'm stumbling around right now trying to solve my totally unrelated problem…

The link opens to a project editor—which is a first for me—but interesting. I couldn't find out how to get the console in this view quickly so I just started up the normal dev-tools on the iFrame in question.

 

There still seems to be the problem from before, that document.getElementsByClassName('fullpage-loader')[0]; leads you nowhere. I cannot find an element with the class: fullpage-loader anywhere in the htmlfiles....

[mauro33 2 Likes (Newbie)]

Hi iDad5, 
Sorry, I forgot to remove that part of the code. That part is not related to what I want to solve. I have already removed that part of the code. 
My problem is only related to the zoom at the end of the image transition. I have not yet been able to call the image that is inside the temporary object created with js (.temp-image) and change his scale property. 

[Rodrigo 5,416 Likes (Superhero)]

Hi,

 

I'm having a few issues following the code, not because is bad but because I have no experience with Barba.

 

Can you guide me to the point where the Flip animation is happening and the Scale down as well? If I'm understanding correctly you should scale the image back down on the click event, before recording the state with Flip so the Flip animation happens with the image at it's regular zoom level. But as I mentioned I'm having some issues following how your code is working and it's sequence since it's almost 400 lines of code that I'm totally unfamiliar with.

 

Happy Tweening!

[mauro33 2 Likes (Newbie)]

Thank you Rodrigo, 
Yes, as I said I create an object to create the illusion that it moves from one page to another. The object is an <a> tag containing an image. This happens from line 184 to 210 of the code (scripts.js file). 
 

As the images in the gallery  have a zoom in hover effect of 1.05, I must create the object at the same scale but I do not transform the tag <a> but the image that is inside. I can do this either by css or as in the example that is made in js on line 372 of the demo scripts file.

then I configure the behavior and animation of the object from line 214 to 264 of the same file. It is in the animation with gsap. here is where I can change the image scale back to match the size of the final page image code line 232 / timeline.to(`.${tempClassObj}`. Just that here I am calling the <a> tag and not the image so the scale is the same but the image is smaller,  does not look very good. Here I don't know how to call the image.

"If I'm understanding correctly you should scale the image back down on the click event" Yes, I create the object with a scale and then when I click I modify the scale in the animation i mentioned in the preceding paragraph.

[elegantseagulls 1,443 Likes (Superhero)]

I cannot seem to edit the file (I tried forking the project, but couldn't get it to run properly), but I'm guessing you'll need to call your gsap timeline after the temp image is added to the page, otherwise gsap doesn't know what to call. Try console logging gsap.utils.toArray('.temp-image img") right after you create it, to see if you can target it at that point. if that's the case, you may need to call a function using that as a prop... something like:

 

const animateTempImage = (tempImg) => {
  gsap.to(tempImg, { ... })
}

animateTempImage(gsap.utils.toArray('.temp-image img'))

 

[mauro33 2 Likes (Newbie)]

HI elegantseagulls, 

 

thank you, I will try to follow your indications.

[mauro33 2 Likes (Newbie)]

Hi elegantseagulls, 

 

I think you can edit the code from codepen now. sorry, this is my first time using codepen and I am just finding out how it works. I keep trying to create the image object to call it in the timeline but I can't get it to work yet.

 

https://codepen.io/Mauro33/project/editor/ANYRkr

[Rodrigo 5,416 Likes (Superhero)]

Hi,

 

I insist that this is the perfect job for the Flip plugin. I wouldn't create and add a new element in the DOM just have an empty element and update the src of the image in that target element and leave the rest for Flip.

 

https://greensock.com/docs/v3/Plugins/Flip

 

Take a look at this examples:

See the Pen XWKLYWe by GreenSock (@GreenSock) on CodePen

 

See the Pen MWyGoxZ by GreenSock (@GreenSock) on CodePen

 

See the Pen QWNZgWX by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[mauro33 2 Likes (Newbie)]

Thank you Rodrigo, 

Maybe I'll go online with the version I already have no matter if there is a small bug and then I'll check the plugin you share with me for the next update.
I have a question regarding the plugin: Can I flip between images that are on different pages?

Thanks

[Rodrigo 5,416 Likes (Superhero)]

1 hour ago, mauro33 said:

I have a question regarding the plugin: Can I flip between images that are on different pages?

No, what you can do is create an element that has the same position and dimensions that it has  in the next page, create the Flip animation and once that is complete make the page transition. You cannot create a Flip animation (or any animation for what matters) for an element that is not in the DOM yet.

 

Hopefully this clear things up.

Happy Tweening!

[elegantseagulls 1,443 Likes (Superhero)]

3 hours ago, Rodrigo said:

No, what you can do is create an element that has the same position and dimensions that it has  in the next page, create the Flip animation and once that is complete make the page transition. You cannot create a Flip animation (or any animation for what matters) for an element that is not in the DOM yet.

I do believe you could create the flip animation during the Barba transition, when both new and outgoing elements are available to the dom, to get the effect you're looking for.

[mauro33 2 Likes (Newbie)]

Hi all,

I want to thank everyone for answering my question 👍. As elegantseagulls proposed, I should declare  the image in the creation of the object
Here the solution if you are interested:

 

const imageTempClass = 'image-temp-class';
 

const imageTempElement = document.querySelector('.temp-image img');

imageTempElement.className = imageTempClass;

element.append(el);