FlowScripts-AI-powered scripting assistant

Example

Using GSAP's `ScrollTrigger` plugin to create animations triggered by scroll events.

Scenario

A website that features sections where images scale up as users scroll down the page, achieved with GSAP ScrollTrigger scrub functionality. Example: Scaling an image from 0 to full size as the user scrolls down the section, ensuring smooth and synced animations with scrolling events【12†source】.

Example

Creating animations that only run at specific screen sizes using GSAP's matchMedia function.

Scenario

A landing page with a complex animation that should only trigger on desktop views (above 992px), such as a hero image zoom effect. Example: Using `gsap.matchMedia()` to target different animations for tablet or mobile screens【13†source】.

Example

ScrollTrigger's snap functionality to create smooth snapping effects between sections.

Scenario

On a scrolling website, sections snap into place as users scroll down. The snap behavior is configured with ease and delay settings to create a satisfying scrolling experience that gives users a 'snap-to-grid' effect for better UX【14†source】.

Example

Triggering animations based on toggle actions such as play, pause, resume, and reset.

Scenario

A site where headings fade in and images scale as the user scrolls, then reset to the original state when scrolling back up. This functionality ensures that the animations re-trigger only when required【15†source】.

Example

Detecting the direction of scroll to trigger specific actions, like hiding or showing elements.

Scenario

A fixed navigation bar that hides when scrolling down but reappears when scrolling up, enhancing the user's focus on the content. This interaction adds a dynamic layer of responsiveness【16†source】.

Example

Correcting issues with lazy-loaded content that causes ScrollTrigger to miscalculate trigger points.

Scenario

When images load after the initial render, it can affect animation timing. Using GSAP's `ScrollTrigger.refresh()` can correct the position of markers by recalculating trigger points after images or fonts load, solving issues where animations start too soon【17†source】.

Example

Preventing unwanted flashes of content before animations are triggered by hiding elements with a 'data-gsap-hidden' attribute.

Scenario

On a website where elements appear with an animation, using CSS to hide elements before the animation starts prevents a visual flash on page load. This ensures a smoother, controlled introduction of content【19†source】.

Example

Applying a stagger effect to elements either by amount or by each item.

Scenario

In an animated list of items, staggering the appearance of each item creates a cascading visual effect. By controlling the timing between each item with either a total duration (amount) or individual delay (each), developers can craft smooth, professional transitions【18†source】.

Example

Animating text by words or characters, such as sliding letters up or rotating them.

Scenario

For a headline that dynamically appears on scroll, SplitType can break text into individual words or characters. Each element can then be animated separately, for example, by sliding each word into view with a staggered timeline for a compelling visual entrance【20†source】.