Search the Community
Showing results for tags 'function calls'.
Found 3 results
-
gsap timeline A function to control the opacity of the element flowing on z-axis
DexteRs Code posted a topic in GSAP
I'am trying to create an image gallery, where images flow on z-axis. I am able make image div to flow on z-axis using scrolltrigger. But what I wanted, was to control the opacity of div to go from 1 to 0 when the image div (class name as "square") is close to camera/ viewport (for this code it is z = 700) so it will have a fade effect. In short whenever any one of these five image div goes z = 700 the opacity should be 0 . In style.css I've used perspective attribute for 3d perspective which will allow me to have images to flow on z-axis. I got this idea from awwwards.com original concept for reference: http://ab-architects.nextpage.agency/public/ I am trying to create gallery like this but cant figure out how to control the opacity in between the timeline animation... any suggestions on how I could achieve this effect using timeline and keep the scrolltrigger. Thanks in advance -
Toggle timeline (play/reverse) within another function of an ES6 class
passi9412 posted a topic in GSAP
Hi there, I am very new to javascript and trying to keep the code readable. I want my timeline to be in a separate function and being played and reversed on a button click. However, the animation only fires forward, but never backwards and I cant get my head around it. If I put the timeline into the constructor method it suddenly works, but not if putting it into a separate function. The codepen is a very simplified version for the main issue. I'd glad if someone could lend me a helping hand. If you have better suggestions how to structure the code, I am very open to learn something. Just want to write it as clean as possible. -
How can I make this work? I want to pause, clear/reset my TimelineMax from this onclick function call. I'm getting an "Uncaught SyntaxError: missing ) after argument list" when I run the console. Is what I'm trying to do correct or possible? <div class="nav"><div class="arrowDown"><a href="#slide03" onclick="init03(); init02(tl2.pause(0); tl2.clear(); ); "></a></div></div> </div> An abbreviatated JS version of the init02() function has this: function init02(){ var tl2 = new TimelineMax(); tl2.to... } Thank you for your time and help.
