Demky
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Demky
-
-
wow thank you, I tried to fix it for so many hours ?
I will keep the GSAP solution since I already had the CDN on my webpage. ?
I don't like to remove
backface-visibility: hidden;
Maybe I don't understand the definition but it look like it perfectly fit in this situation
QuoteThe
backface-visibility
CSS property sets whether the back face of an element is visible when turned towards the user.the
translateZ(1px)
is so clever ? -
Ok so it works perfectly with GSAP.
(now i just need to customise the animation)
I bet I will never know why the CSS isn't working. ?
-
Hello,
I have a problem not related to GSAP, I don't find any solution, I asked on 3 forums (+stackoverflow) and didn't find any answer.
I already used GSAP on my webpage for a small animation and I was wondering if it could help me with this problem or if it would be overkill to use GSAP (performance/ressources).
I tried to document my problem on stackoverflow (if someone want to read more details) :
I made a card that can rotate on Y when it's mouse hovered (everything with CSS).
the problem is that when I use css to change the opacity (svg flag) or the position of an element (text in my situation) on the back of the card, the rotate animation is buggy and got a delay of +/-1sec to display the back of the card./!\ the bug occur only once, the first time the
rotateY
is used; to do it again, you need to reload the page (F5).
The bug only apear in Chrome (work perfectly on firefox).If I use GSAP to do the rotation instead of css, should it fix the problem or is the problem from chrome and would still be here with GSAP ?
(what would be more logic using GSAP for the rotation on Y or for opacity/text position?)
I made a codepen with the problem :
-> if you remove the css classes
.bottom-right
and.changeOpacity
there is no more delay.As I said on stackoverflow, if you use the template from w3school and just add an opacity to an element from the back of their card (exemple .flip-card-back), it does the same delay problem so I don't think the error is from my code :
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card
What would you do in my situation ?
I can't believe it's impossible to customise the back of a card that rotate ?
I don't really know if I can post my question here but I don't know where to search a solutionLet me know if something isn't clear.
----------------------
Edit : looking to test it with gsap to see if it work;found this thread, will try it soon ;
-
18 hours ago, PointC said:
You need to set your timeline to reversed in the vars.
tl = new TimelineMax({reversed:true, paused:true});
If it's only paused the first click reverses it, but it's already sitting at 0 so it appears nothing happened. Make sense?
Happy tweening.
thank you for the information (and the new option) it make sense.
tl.reversed(!tl.reversed())
??
i don't want to waste your time but how should one find this information(reversed:true)?
I tried to find the solution and didnt find it ?; did you just knew it or did you read it somewhere ?reading https://greensock.com/docs/TimelineMax to see if I missed it
-
On 7/12/2019 at 5:48 PM, PointC said:
There are a lot of ways to switch the direction of the timeline on click. Usually you'll just do something like this in your click handler:
tl.reversed() ? tl.play() : tl.reverse();
Hello,Any tips on why when I do use your lane, I need 2 clicks to launch the animation ?
(look like the first click do a reverse (?) and then it launch with the second click (?) - once you clicked, you need to refresh the page to see the "bug" again)
code pen :
See the Pen aggyme by Demky (@Demky) on CodePen
it work fine with a flag but I thought your one-lane was cuter:let isJavaAnimDone = false; $('#javaSpell').on('click', function () { if (!isJavaAnimDone) { javaAnim.play(0); isJavaAnimDone = true; console.log("isJavaAnimDone +++ " + isJavaAnimDone); } else { javaAnim.reverse(); isJavaAnimDone = false; } });
-
you think too fast ?, I just edited my message with the boolean;
edit : thanks for isActive(), I will read the page and think about your solution :
tl.reversed() ? tl.play() : tl.reverse();
Edit2 : Wow, I was trying to transform my code to something like your lane with reverse() and bool? aaa : bbb ; I thought the 'reversed' was a typo but in fact that is the answer for doing it with only one lane of code : https://greensock.com/docs/TimelineMax/reversed
Thanks.
- 1
-
thank you I will look it ?
I'm trying to add a boolean to detect if the click need to launch the rotation or the .reverse() by changing the state of the bool inside the 'animation'
I expected it to be like that but it would have been too easy ?:
.to("#JavaSpell", 1, {rotation:360, ease:Linear.easeNone}, {"isJavaAnimDone":true})thanks for your time I will continue
ps : one question; why do you use var ? aren't we supposed to use let or const with the new JavaScript rules ? (at least they told us that in school)
any particular reason ?
edit: finaly I didnt need to change the boolean inside the GSAP animation, I added it inside the function :
$('#JavaSpell').on('click', function(){ if (!isJavaAnimDone) { javaAnim.play(0); isJavaAnimDone = true; } else { javaAnim.reverse(); isJavaAnimDone = false; }
-
Oh thank you, I was looking your codepen, it look so complexe but it's so beautiful?
I think I should keep reading the GSAP tutorial
- 1
-
thank you for both answer.
I used it like that (before seeing PointC's interesting code):
var javaAnim = new TimelineMax({paused: true}); javaAnim .to("#JavaSpell", 1, {rotation:360, ease:Linear.easeNone}) .to("#JavaSpell", 0.5, {rotation:1080, ease:Linear.easeNone}) .to("#JavaSpell", 1, {rotation:1800, ease:Elastic.easeOut}); $('#JavaSpell').on('click', function(){ javaAnim.play(0); });
I don't know if that's really what I had in head; I espected the end to be a bit more elastic but I love it ?
I will continue to try to improve it.Do you know if there is a easy way to rewind something with GSAP or should I write the reverse code by hand ?
I will search for the answer -
Hello, i’m trying to learn how to use GSAP.
I want to make a “washing machine” rotation effect :
- On click object start rotating slowly for 2seconds
- rotate at max speed for 2 seconds
- rotate slowly 2 secondes till it’s stop (todo later : stop with ease:Elastic.easeOut effect)
I thought I could write the 3 orders one after one but when I do so, GSAP only ‘do the first one’
(i didnt use any duration because i'm trying first to make the 3 speeds working)
$('#whiteCube').on('click', function(){ TweenMax.to("#whiteCube", 2, {rotation:360}); TweenMax.to("#whiteCube", 2, {rotation:720}); TweenMax.to("#whiteCube", 2, {rotation:360}); });
I don't know if this question is related to GSAP but, any idea why only the first click is launching the function ?
the other clics are detected but doesn't launch the rotation.
any tips ?
codepen.io/Demky/pen/pXBPGr
thank you.
probleme css rotateY() and opacity/position, can I use GSAP or would it be overkill ?
in GSAP
Posted
thank you for all the infos, I will read it ?
I tried a lot of google search and never found information about this problem when I tried to fix it ?