Award Winning Animation With Only 20 Lines Of CSS?



Watch as I show you how to recreate the sliding image track effect from https://camillemormal.com.

Get Font Awesome Pro: https://fontawesome.com/referral?a=755e5ceb4c

Merch: https://cottonbureau.com/p/ESQABX/shirt/the-web-dev-duo#/15799271

Support the channel: https://ko-fi.com/hyperplexed (accepts PayPal, card, etc).

Tools used: HTML, CSS, JavaScript

CodePen: https://cdpn.io/MWXBRBp

Music Credits:

Red Green Blue – StreamBeats – Lofi – Harris Heller

source

37 thoughts on “Award Winning Animation With Only 20 Lines Of CSS?”

  1. There is a slight issue with the script you gave because if your first click doesn't contain any movement then the percentage isn't set and the animation won't work anymore …
    To fix this a check like this in the handleOnUp does the trick
    "track.dataset.prevPercentage = (typeof track.dataset.percentage === 'undefined') ? 0 : track.dataset.percentage;"

    Reply

Leave a Comment