Copy the “0%” text block we created earlier by right clicking and selecting Copy from the dropdown menu. Then right click again on Progress Wrapper div and select Paste Inside from the dropdown menu.
Double click the newly-placed text block and change the copy to “100%.”
Step 2: Add the Call to Action
We’re on the home stretch! Add a div below the “100%” text block and give it a class of “Share Post” using these settings:
- Display Setting: Flex
- Flex Layout: Horizontal,
- Justify: Start
- Align: Stretch
- Padding (Top, Right & Bottom): 5px
- Padding (Left): 10px
- Width: 255px
- Position: Absolute, Bottom Left
- Left: 25px
- Bottom: 30px
- Font Color: White
- Background Color: #ff1657
- Border Radius: 2px
Add a Text Block in the Share Post div and replace the text with “Enjoy this post? Share it!” Highlight the “Share It!” copy and select Bold.
Next, add the Webflow “Twitter Widget.” Tick the checkbox “Show Bubble” to off and give it a class of “Share Button.”
Add the following settings:
- Padding (Left): 5px
- Height: 21px
Step 3: Add the Interactions
Navigate to Interactions panel and select the plus icon in the On Current Page section. From the dropdown menu choose While Page is Scrolling.
From the Action dropdown menu select Play Scroll Animation and change the Smoothing to “90%.” Finally, click the plus icon and rename the interaction “Progress Bar Trigger.”
Next, select the Progress Bar div and click the plus icon next to Scroll Actions. Select Size from the dropdown menu, select the interaction at the 0% position in the animation pane, and add a height of “1%.” Now, select the interaction at the 100% position and change the Height to “100%.”
Feel free to test it out at this point!
Next, select the Share Post div, hover over the plus icon at the 0% position in the animation pane, and select Opacity from the dropdown menu. Set it to “0% Opacity.”
Add another interaction point at around the 85% mark on the animation pane and, again, select Opacity from the dropdown menu. Set it to “0% Opacity.”
Finally, add the last interaction at the 100% position in the animation pane by choosing Opacity from the dropdown menu. Once it’s selected, leave the default opacity level at “100%”.
We’re done! Publish and test it out!