Scroll Flip

Newer Tutorial Available

Cloneable

Add to before </body> tag in page or project settings

<style>body.scrollflip-relative [tr-scrollflip-sticky=true] { position: relative; }</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/Flip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script>
// SCROLL FLIP POWER-UP
window.addEventListener("DOMContentLoaded", (event) => {
  // attribute value checker
  function attr(defaultVal, attrVal) {
    const defaultValType = typeof defaultVal;
    if (typeof attrVal !== "string" || attrVal.trim() === "") return defaultVal;
    if (attrVal === "true" && defaultValType === "boolean") return true;
    if (attrVal === "false" && defaultValType === "boolean") return false;
    if (isNaN(attrVal) && defaultValType === "string") return attrVal;
    if (!isNaN(attrVal) && defaultValType === "number") return +attrVal;
    return defaultVal;
  }
  gsap.registerPlugin(ScrollTrigger, Flip);
  ScrollTrigger.normalizeScroll(true);
  // scrollflip component
  $("[tr-scrollflip-element='component']").each(function (index) {
    let componentEl = $(this),
      originEl = componentEl.find("[tr-scrollflip-element='origin']"),
      targetEl = componentEl.find("[tr-scrollflip-element='target']"),
      scrubStartEl = componentEl.find("[tr-scrollflip-scrubstart]"),
      scrubEndEl = componentEl.find("[tr-scrollflip-scrubend]");
    let startSetting = attr("top top", scrubStartEl.attr("tr-scrollflip-scrubstart")),
      endSetting = attr("bottom bottom", scrubEndEl.attr("tr-scrollflip-scrubend")),
      staggerSpeedSetting = attr(0, componentEl.attr("tr-scrollflip-staggerspeed")),
      staggerDirectionSetting = attr("start", componentEl.attr("tr-scrollflip-staggerdirection")),
      scaleSetting = attr(false, componentEl.attr("tr-scrollflip-scale")),
      breakpointSetting = attr(0, componentEl.attr("tr-scrollflip-breakpoint"));
    let componentIndex = index,
      timeline,
      resizeTimer;
    // asign matching data flip ids
    originEl.each(function (index) {
      let flipId = `${componentIndex}-${index}`;
      $(this).attr("data-flip-id", flipId);
      targetEl.eq(index).attr("data-flip-id", flipId);
    });
    // create timeline
    function createTimeline() {
      if (timeline) {
        timeline.kill();
        gsap.set(targetEl, { clearProps: "all" });
      }
      $("body").addClass("scrollflip-relative");
      gsap.matchMedia().add(`(min-width: ${breakpointSetting}px)`, () => {
        const state = Flip.getState(originEl);
        timeline = gsap.timeline({scrollTrigger: { trigger: scrubStartEl, endTrigger: scrubEndEl, start: startSetting, end: endSetting, scrub: true }});
        timeline.add(Flip.from(state, { targets: targetEl, scale: scaleSetting, stagger: { amount: staggerSpeedSetting, from: staggerDirectionSetting }}));
      });
      $("body").removeClass("scrollflip-relative");
    }
    createTimeline();
    // update on window resize
    window.addEventListener("resize", function () {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function () {
        createTimeline();
      }, 250);
    });
  });
});
</script>

Copy Code

Apply the required attributes

Required Elements

This component contains all elements related to this instance

Name

tr-scrollflip-element

Value

component

Optional settings for this element

distribute start times of multiple targets over this many seconds

Name

tr-scrollflip-staggerspeed

Value

0.2

stagger targets from start, center, end, or random

Name

tr-scrollflip-staggerdirection

Value

end

scale target into place instead of animating width and height

Name

tr-scrollflip-scale

Value

true

only run interaction at this screen size and larger

Name

tr-scrollflip-breakpoint

Value

992

Name

Value

Animate target from this origin element's size, position, and rotation

Name

tr-scrollflip-element

Value

origin

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Animate this target element back to its default position

If image, set max-width to none

Name

tr-scrollflip-element

Value

target

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Start interaction based on this element's scroll position

Example: when top of element reaches top of screen. Keywords: top, center, bottom, 75%. Apply to a child of component.

Name

tr-scrollflip-scrubstart

Value

top top

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

End interaction based on this element's scroll position

Example: when bottom of element reaches bottom of screen. Keywords: top, center, bottom, 75%. Apply to a child of component.

Name

tr-scrollflip-scrubend

Value

bottom bottom

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Optional Elements

This position sticky element contains or is an origin / target element

Name

tr-scrollflip-sticky

Value

true

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Optional Settings

No items found.

Project Cloneable

Original Website

Project Code

Starter File

Design File

Documentation

All Resources

No items found.