thednp / kute.js

KUTE.js is a JavaScript animation engine for modern browsers.

Home Page:http://thednp.github.io/kute.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

'to' does'nt pick current values after 'fromTo' (newby question, perhaps I'm a fool)

JensB74 opened this issue · comments

Hi together,

I have the following piece of code to entrance a screenshot:

	var versatz_screen = 40;
	var winWidth = $(window).innerWidth();
	var winCenter = winWidth / 2;
	var screen1_x = winCenter - $("#kute .screenshot1").width() + versatz_screen;
	var ease = "easingCubicOut";

	var screen1 = KUTE.fromTo("#kute .screenshot1", 
		{ scale: .25, rotate: -75, translate: [-500 + screen1_x, -25], opacity: 0 },
		{ scale: 1, rotate: -7, translate: [screen1_x, -25], opacity: 1	},
		{ transformOrigin: "100% 100%", duration: 900, easing: ease }
	).start();

which works great!

After 2 seconds, I want to exit the screenshot with this code:

	var remove_screen_1 = KUTE.to("#kute .screenshot1",
		{ translateX: -1000 },
		{ duration: 4000, delay: 2000, easing: ease }
	).start();

The delay works, but the rest .. not. No animation, the screenshot will be displayed directly on the starting position from the "fromTo" starting values, but with opacity:1.

I thougth the "to" method gets the current position of the screenshot (the end values of "fromTo") and starts from there.

I'm new to this fantastic lib, so sorry, if I'm only a fool :/ and have a mistake in thinking ...
(and sorry for my english ;))

I cannot confirm or deny, I need a test site and a step-by-step guide to reproduce. Also need to know what build you use and such.

Thank you for you answer, I work on this site you can visit redesign.selisky-design.de, step-by-step: only visit the page, the animation comes up ;)
The build is 1.6.5, because it's a module of the cms we use (Contao), perhaps, this is the problem .. I can try to use the 2.x ..

Edit1: By the way, I want to use "allTo" to exit all elements at the same time with the same animation .. but it doesn't work with "to" nor with "allTo".

Edit2: I have added a page where I used KUTE 2 (latest) (see link on the page), same Code as above, but even doesn't work.

Please try the latest version and let me know how it goes.

EDITED with latest Version - unfortunately the same problem :/

I think I will do it with "fromTo" and use the end-values as start-values ...

No, you can't do 2 tween animations at the same time, the delay won't help. You need to make use of .chain() method. Also please use the latest version (you might have to update your code for that).

The "remove_screen_1" animation may not have proper values since previous tween haven't finished yet, but I don't understand why you don't try my Spicr

Ok, thanks a lot for your help! I will try chain() method and Spicr (its not a module for the cms, so I have to install it manually, but sounds interesting, thanks for the tip)! I think you can close this, because it was a nooby question, if you want/can you can delete this too, because of the links in here .. if it's possible.

I will edit your posts with links and close.

Cheers