Search the Community
Showing results for tags 'function-based values'.
Found 2 results
-
Hi, Greetings to all with my first post ever in this mighty forum! I am trying to create a scroll effect where a list of image cards grow as they're scrolled up. The max height for each card will be the same ( determined by the image element wrapped in the container) and will be reached when the card reaches to the center of the screen. The initial height for each card on page load will be determined by their order in the document flow and the relative distance to the viewport center. Here's a mini demo I created that does an acceptable job in carrying out the desired effect, a few things that need fix: 1. the janky feel i put the demo list in the scroll smoother starter codepen and since scroll smoother uses scrolltrigger under the hood, i wonder if there's anything i need to take care to coordinate with the scrolltrigger instances i create for my animations. 2. the image flash It must be something related to refresh or update that i have messed up Besides direct fixes, I'd also hope to get some high-level clarification regarding the thinking when assessing implementation ideas for animation with gsap. My feeling is i'm not taking advantage of what it has to offer which causes repetitive work in my code when things are better off left to gsap's magic under the hood. To get there surely requires more time writing code in general, and likely a few dozens, if not more buggy demos here too. Until then, I'm hoping for some generous tips. Looking forward to any response and thank you so much in advance for your time! -
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. GSAP version 1.19.0 introduces some exciting new features for advanced users as well as conveniences for everyone (even the "greenest" novices). The most noteworthy improvements are summarized below: Function-based values Instead of a number (x:100) or string (width:"300px") or relative value (y:"+=50"), you can now define most values as a function that'll get called once for each target the first time the tween renders, and whatever is returned by that function will be used as the value. This can be very useful for randomizing things or applying conditional logic. See it in action in the demos below. See the Pen BzmGba by GreenSock (@GreenSock) on CodePen. ...and more GSAP 1.19.0 is more ES6-friendly (for example, you can npm install gsap and then import {TweenLite, Elastic, TimelineMax} from "gsap" in your project). Plenty of bug fixes too. See the whole list in the github changelog. DOWNLOAD GSAP TODAY Happy tweening!
