Diaco beat me to it
Anyways, here's what I came up with:
Edit: movement triggers when hovering.
Edit2: Made the flow feel more natural.
Added a slight rotation to see it from the side. If you want to see it from the top, just remove the rotation from the stage class.
Hi @geddski
At first, for the Club GreenSock bonus plugins on Codepen; you can find the codepen safe versions here: https://codepen.io/GreenSock/pen/OPqpRJ
And about your issue; pls try to wrap your spacing entities with a span tag. <span> .....</span>
Splittext completely respects to <br> tags.
btw, you can use " " instead of " "
Great solution, Sahil!
@vulture, Welcome to the forums.
I had a bit of trouble assessing what you wanted your code to do. I'm sure you're just starting out with GSAP, no worries, there is a lot to explore.
One of the great strengths of GSAP is its ability to group animations together in sequences called Timelines. Animations in a timeline do not have to follow a strict one-after-the-other pattern. They can overlap and even have gaps. You can even nest timelines in timelines.
As you can see by Sahil's demo the 2 animations follow perfectly in sequence. No need for onComplete callbacks and setTimeout().
Also, if you want to set properties instantly (no animation) you can use the set() method. https://greensock.com/docs/TweenLite/static.set()
I'm sure you will love timeline's once you get comfortable with them.
Take a look at these articles / videos
https://greensock.com/sequence-video
https://greensock.com/position-parameter
Good luck on your project.
Happy Tweening!
Not sure what happened to demo I posted, it was working while I was editing it. Anyway, you can do it like this and save yourself from all the calculation.
Hi @hanslibuzli
Hmm, there's another simpler way;
pls check this out :
var zoom = 2;
TweenMax.to('.outer',1,{scale:zoom,onUpdate:function(){
TweenLite.set('.inner',{z:0.2,scale:1/this.target[0]._gsTransform.scaleX});
}
,repeat:-1,yoyo:true
})
Thanks @lennco!
I feel a bit stupid - less is more.
Thank you for the options, visibility one suits me best. Good to know I can actually set the start of the separator to -1, now it looks quite smooth.
Happy Tweening!
Hello dear friends,
No doubt Christmas is coming ...
Hi @Jonathan - sorry, when I saw your new portrait, I just felt the need to redecorate my tree to dedicate it to the GreenSock community.
I coded my first Christmas tree inspired by the work of Petr Tichy (here) Dec 2015. It was one of my first exercises.
Kind regards
Mikel