Animate Text on Scroll

January 14, 2020 • Animate, Scroll

We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo.

That demo is here:

See the Pen

Selfie Crawl by Chris Coyier (@chriscoyier)

on CodePen.

@keyframers covered it much nicer than I did and made this video. (Seriously, it’s so clear and concise — it’s a great watch.)

I particularly like how quick’n’easy creating, exporting, optimizing, and integrating the actual SVG codes in their demonstration.

Their final demo:

See the Pen

SVG textPath Animation on Scroll Tutorial | Keyssentials: Web Animation Tips by @keyframers by @keyframers (@keyframers)

on CodePen.

12 JQuery Scroll Effects

December 22, 2019 • jQuery, Scroll

Collection of free jQuery scroll effect examples.

November 27, 2019

Collection of free jQuery scroll effect code examples.

Author

Traf
August 10, 2019

Made with

HTML / CSS / JS

About a code

Scale Hero Section on Scroll

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

Adam Kuhn
July 31, 2019

Made with

HTML (Haml) / CSS (SCSS) / JS

About a code

Scroll Distortion

Tornis.js GSAP to update SVG filter values on scroll.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tornis.js, tweenmax.js

Author

Brian Haferkamp
July 29, 2019

Made with

HTML (Pug) / CSS (Sass) / JS

About a code

Unique Scrolling Presentation

This unique scrolling presentation uses CSS Grid and a little bit of JavaScript to change the fixed image as the user scrolls the page.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

Recreatorus
November 17, 2018

Made with

HTML / CSS (SCSS) / JS

About a code

Scrolling Articles Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, smooth-scrollbar.js, overscroll.js

Author

Jason D’Oyley
November 13, 2018

Made with

HTML / CSS / JS

About a code

Zoom Hero Image On Scroll

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

Joshua Ward
November 11, 2018

Made with

HTML (Pug) / CSS (SCSS) / JS

About a code

One Page Scrolly Thing

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

Muhammed Erdem
November 6, 2018

Made with

HTML (Pug) / CSS (SCSS) / JS

About a code

Scroll List Animation

A smooth scroll animation example for listing. Made with smooth-scrollbar.js and overscroll plugin.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, smooth-scrollbar.js, overscroll.js

Author

Jesus
August 29, 2018

Made with

HTML / CSS (SCSS) / JS

About a code

Show Elements on Scroll

Using jQuery and SCSS to bring to the screen elements gradually.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

Fabio Ottaviani
June 18, 2018

Made with

HTML / CSS (SCSS) / JS

About a code

Image Mask Reveal Animation

Scroll down effect in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author

Daniel Givens
September 4, 2017

Made with

HTML / CSS (SCSS) / JS

About a code

jQuery Scroll Effect for Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, tweenmax.js, smooth-scrollbar.js

Author

Nathan Taylor
August 29, 2017

Made with

HTML / CSS (SCSS) / JS (Babel)

About a code

Momentum Scroll Fixed Element

Often fixed elements can feel a bit unnatural. I wanted to give a bit more weight to the floating object. I tried to capture the momentum feeling of natural browser scrolling. This also doesn’t interfere with the default page scroll so there is no ‘scroll jacking’ going on here.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js