Change the y value when animation play

[Baris Dogan]

Hey Guys 

 

I need your idea 

Can I change the Y value when animation playing?

So let me explain;  object's Y pos start from 0px to 200px in 9 sec 

in the 4. sec object's Y pos  (proximity 90px) and jump 20px up then animation  continue from 110 to 200

 

 

How can I do that 

 

Many Thanks 

 

[GreenSock]

You mean dynamically or do you want to pre-program that type of thing from the beginning? Both are possible. I assume you meant dynamically, so here's what it could look like:

var tween = TweenMax.to(element, 9, {y:200});
//then later...
tween = TweenMax.fromTo(element, tween.duration() - tween.time(), {y:110}, {y:200});

 

There are other ways too, but hopefully this gets you what you need. 

[Baris Dogan]

16 hours ago, GreenSock said:

You mean dynamically or do you want to pre-program that type of thing from the beginning? Both are possible. I assume you meant dynamically, so here's what it could look like:

var tween = TweenMax.to(element, 9, {y:200});
//then later...
tween = TweenMax.fromTo(element, tween.duration() - tween.time(), {y:110}, {y:200});

 

There are other ways too, but hopefully this gets you what you need. 

 

Hi Jack
Thank you so much

 

I have tried but it doesn't work or I couldn't 

 

 var tween = TweenMax.to(text_1, 9, {y:-200, ease: Power1.easeInOut});

 tween = TweenMax.fromTo(text_1, tween.duration() - tween.time(), {y:-110, ease: Elastic.easeOut.config(1, 0.5)}, {y:-200, ease: Power1.easeInOut});

 

so how can I define the time of jump animation? 

 

object's Y pos start from 0px to 200px in 9 sec  //  var tween = TweenMax.to(text_1, 9, {y:-200, ease: Power1.easeInOut});  // this part OK

at the 4. sec, object's Y pos  jumpUP "-=20px" ...  then animation continue to 200

 

 

 

Many Thanks 

 

 

 

[Baris Dogan]

5 hours ago, Baris Dogan said:

 

Hi Jack
Thank you so much

 

I have tried but it doesn't work or I couldn't 

 

 var tween = TweenMax.to(text_1, 9, {y:-200, ease: Power1.easeInOut});

 tween = TweenMax.fromTo(text_1, tween.duration() - tween.time(), {y:-110, ease: Elastic.easeOut.config(1, 0.5)}, {y:-200, ease: Power1.easeInOut});

 

so how can I define the time of jump animation? 

 

object's Y pos start from 0px to 200px in 9 sec  //  var tween = TweenMax.to(text_1, 9, {y:-200, ease: Power1.easeInOut});  // this part OK

at the 4. sec, object's Y pos  jumpUP "-=20px" ...  then animation continue to 200

 

 

 

Many Thanks 

 

 

 

 

 

Hi Jack 

 

 

I have to try that code, it is work but not perfect 

 

var tl = new TimelineMax({repeat:0, yoyo:true, repeatDelay:0, overwrite: true})
        tl.to(text1_img, 9, {y:167, ease: Power1.easeInOut},"+=1.8")
        .to(text1_img, .5, {y:"+=40", ease: Elastic.easeOut, overwrite: false}, "-=4")

 

attached the screen record video, could you take a look please 

you will understand very well 

 

at 6.sec of the video, there is a gap.

how can I fix it? 

 

Many Thanks 

 

 

[Carl]

Hi Baris,

 

It is very difficult to know what is happening without a live demo.

Please create a simple CodePen demo with just enough code to illustrate the problem.

If clicking on a button with 3 animated dots and expanding something isn't related to the issue, please leave that stuff out

 

Instructions here: 

 

 

Thanks!

[Baris Dogan]

On 10/26/2018 at 4:41 PM, Carl said:

Hi Baris,

 

It is very difficult to know what is happening without a live demo.

Please create a simple CodePen demo with just enough code to illustrate the problem.

If clicking on a button with 3 animated dots and expanding something isn't related to the issue, please leave that stuff out

 

Instructions here: 

 

 

Thanks!

 

 

 

Hi Guys 

 

I uploaded the CodePen

 

There are 2 problems:

- SVG is not displayed for these browsers on windows ( IE-EDGE/FireFox/Safari )

- Change the Y  value when animation play

 

I really appreciated if you help me 

 

 

[Carl]

Third problem:

 

I don't see the link to your CodePen    

Please paste the URL in your reply. Thanks!

[Baris Dogan]

Hi Carl 

I have added the link but it has not displayed,
that's why I add again this way please remove the space "http s" 

See the Pen XxLVQz by barisDogan (@barisDogan) on CodePen

[Dipscom]

Hey Baris,

 

I've edited your post to contain a live link for ease of use.

 

I have also looked at your example pen and must say that is far more than a reduced case - There is a ton of irrelevant code in there for the issue that you are asking. If you can remove the stuff that is not related to your question, it will help a lot as we won't have to wade thru a ton of code to figure out what might be going on.

 

However, I think I can understand what you want to achieve. The way I would tackle it would be having a parent <div> that holds all of your elements that are slowly moving upwards then, I would target the individual child element with the extra 20px jump. That way, you will have your constant movement upwards as well as control to make the children jump up whenever you need.

[Baris Dogan]

Thank you Dipscom 

the main problem is SVG is not displayed for these browsers on windows ( IE-EDGE/FireFox/Safari )

 

How can I fixed it?

[Dipscom]

25 minutes ago, Baris Dogan said:

the main problem is SVG is not displayed for these browsers on windows ( IE-EDGE/FireFox/Safari )

 

Eh? Sorry but you seem to be contradicting yourself here. Your initial question and the title of this thread is about moving an element on Y, not about SVG.

 

I hope you can understand that we have limited resources here and thus, must keep this forums GSAP focused or we will be overwhelmed. We can't offer troubleshooting general SVG, JavaScript issues. We do, of course, help out as much as we can and share as much knowledge as we have.

 

In your case you have nearly 100 lines of HTML code, close to 500 lines of CSS and over 200 lines of JavaScript. That's definitely not a reduced case example.

 

Places like StackOverflow is where you will get help with more generic questions as to why your SVG is not displaying.

[Baris Dogan]

Sorry,  I was rush! Totally agree...  I was looking for a quick solution

Many Thanks 

[Dipscom]

Thanks for understanding Baris. We do try and help everyone here as much as we can.

[Baris Dogan]

Hi Again 

 

I re-edit my pen and I have a different problem, I'm not sure here is the correct place even so I would like to ask 
I'm trying to move just "text1_img" but I can, text1_img and "maske" moving together 

I really appreciated if you give me an idea

Please check my pen 

See the Pen BqXxMe by barisDogan (@barisDogan) on CodePen

manyThanks 
 

[Dipscom]

Well Baris, be prepared for a lot of studying if you are going to try and animate stuff inside the <defs> elements - There's all sort of potential bugs there.

 

Another thing, you really should be able to just put a url into your posts without errors. Just try it, yes?

 

The animation is behaving as expected. That is because you are applying a mask to an element with an id of "text1_img" and then moving the masked element.

 

If you want to move the mask and not the masked image, you need to target what's inside your mask. Not the mask itself, mind you.

[Baris Dogan]

Thank you for the quick reply

I need to move just "text1_img".... not "maske" because of this, I have gave the id to image tag
<image id="text1_img" mask="url(#maske)" width="100%" height="100%" xlink:href="http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg" />

I guess it is not correct, How can I give the id to correct element?

 

 

[Dipscom]

What is the effect that you are after? What do expect to see?

 

You can't move the image without moving the mask, they're glued together. You can move the element you have inside your mask, and that will give you the impression your mask is moving. However, if you want the mask to stay in place and the image moving underneath it, you will have to wrap the image in a <g> element and move the image inside it.

 

<svg width="360" height="233" version="1.2">
    <defs>
        <mask id="maske">
            <image width="100%" height="100%" xlink:href="http://motionlove.co.uk/banners/test/text_1Mask.png" />
        </mask>
    </defs>
	<g mask="url(#maske)">
    	<image id="text1_img" width="100%" height="100%" xlink:href="http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg" />
    </g>
</svg>

 

[Baris Dogan]

HAHHAHAH  
You are lifesaver

 

Thank you so much 
if you don't kill me I need to ask something 

Can I change the Y value when the animation playing?

So let me explain;  Please take a look at the 6. line on the javascript

in the 4. sec I'm changing object's Y position as "-=35px" up.. but then animation continues from the wrong Y value

Do you know why? 

 

 

Thank you 

[Dipscom]

It doesn't continue from the wrong value, it does exactly what the code is telling it to do.

 

You see, the first tween you create has no idea of what the second tween is doing so, once the second tween is done playing, the first one continues doing its thing as before. The values calculated in the first tween do not get altered by the second tween. The values on the second tween, however, are influenced by the first one.

 

Refer to my first suggestion as to how to approach what you are trying.