How to do Webflow Customer page interaction

Design help Animations & Interactions
1

Hey guys,

I saw this nice animation on this page: Webflow customer stories and case studies | Webflow
I wonder how to do the looping, does it require custom code?

Thanks a lot!

2

It doesn’t loop perfectly. After a while if you look carefully, it “jumps/resets” to the beginning of the list.

1 Like
4

Thank you!
What kind of interaction I should use to reproduce this effect, can you give me some hint?

5

I’m not sure, but I can extract the part in the JS code for you. Perhaps you can deduce the IX2 effect from this:

   "a-5": 
    {
      "id": "a-5",
      "title": "hero",
      "actionItemGroups": [
        {
          "actionItems": [
            {
              "id": "a-5-n",
              "actionTypeId": "TRANSFORM_MOVE",
              "config": {
                "delay": 0,
                "easing": "",
                "duration": 0,
                "target": "5a31661749520e00017ec982|713ef7ea-5bcb-10db-6892-1388bd881bbb",
                "yValue": 0,
                "xUnit": "PX",
                "yUnit": "%",
                "zUnit": "PX"
              }
            }
          ]
        },
        {
          "actionItems": [
            {
              "id": "a-5-n-2",
              "actionTypeId": "TRANSFORM_MOVE",
              "config": {
                "delay": 0,
                "easing": "",
                "duration": 30000,
                "target": "5a31661749520e00017ec982|713ef7ea-5bcb-10db-6892-1388bd881bbb",
                "yValue": -100,
                "xUnit": "PX",
                "yUnit": "%",
                "zUnit": "PX"
              }
            }
          ]
        }
      ],
      "createdOn": 1511912528246,
      "useFirstGroupAsInitialState": false
    },
    "a-8": {
      "id": "a-8",
      "title": "hero 2",
      "actionItemGroups": [
        {
          "actionItems": [
            {
              "id": "a-8-n",
              "actionTypeId": "TRANSFORM_MOVE",
              "config": {
                "delay": 0,
                "easing": "",
                "duration": 0,
                "target": "5a31661749520e00017ec98b|713ef7ea-5bcb-10db-6892-1388bd881bbb",
                "yValue": 0,
                "xUnit": "PX",
                "yUnit": "%",
                "zUnit": "PX"
              }
            }
          ]
        },
        {
          "actionItems": [
            {
              "id": "a-8-n-2",
              "actionTypeId": "TRANSFORM_MOVE",
              "config": {
                "delay": 0,
                "easing": "",
                "duration": 30000,
                "target": "5a31661749520e00017ec98b|713ef7ea-5bcb-10db-6892-1388bd881bbb",
                "yValue": -100,
                "xUnit": "PX",
                "yUnit": "%",
                "zUnit": "PX"
              }
            }
          ]
        }
      ],
      "createdOn": 1511912528246,
      "useFirstGroupAsInitialState": false
    },
6

Thank you, Im dont know javascript but seems this code not generated by webflow. So it means they code this effect outside of Webflow?

7

This is exactly what is generated for IX/IX2. See the bottom of this file. Every site has a slightly different file generated based on what is being used.

https://daks2k3a4ib2z.cloudfront.net/5a31661749520e00017ec983/js/webflow.b6eb44225.js

8

Anyone else know how to recreate it in Webflow.
I still have no idea :frowning:

9

Hi :wave:
To achieve this looping effect, I absolutely positioned a duplicate of this group of sites to start at the very bottom of it’s parent container, which is the height of just one group of sites. When moving this parent container -100% on the Y axis using transforms, it aligns the main group with it’s duplicate which is absolutely positioned.

So if we animate this parent container from 0% to -100% (with linear easing), the group of sites appear to be looping, but is actually just repeating the same animation over and over.

Does this make sense?

10

Hey @ryanmorrison, thanks a lot for the answer man! I really like the illustration that you did for Webflow.
I think I get it, so to have that effect:

  1. I need to set interaction with Page Trigger > Page Load
  2. Set up the positioning of the 2 groups like what you said
  3. Check the box Loop in webflow, to make that effect repeating over & over

Is this right?

11

Do you have a running example of this that we can clone to add to our websites?