On-Scroll Animations & View Switch

Scroll Animations

@passoul

Pop out image scrollers with CSS scroll-driven animations 🤙 On-Scroll Animations & View Switch Style an element based on the active Scroll Direction and Scroll Speed Create scroll-driven micro-interactions with animation-timeline and custom properties 🔥

#css #open-props #animations

Open Props: sub-atomic styles

.loaded {
  animation: var(--animation-fade-in) forwards;
}

.actionsheet {
  animation: var(--animation-slide-out-down) forwards;

  &.open {
    animation: var(--animation-slide-in-up) forwards;
  }
}

.alert {
  animation: var(--animation-blink);
}

#pop-out #image #scrollers #css #animations

Pop out image scrollers with CSS scroll-driven animations 🤙

https://codepen.io/jh3y/pen/abPgrGR

#scroll #animations #view-switch

On-Scroll Animations & View Switch

https://tympanus.net/Development/OnScrollViewSwitch/

#scroll #javascript

Scroll into a div with buttons

https://codepen.io/robertostringa/pen/XWKEeRw

#ios #swift #scroll

Scroll To Bottom of TableView

func scrollToBottom(){
    DispatchQueue.main.async {
        let indexPath = IndexPath(row: self.dataArray.count-1, section: 0)
        self.tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
    }
}

#html #css #scroll #animation

Smooth Scrolling - CSS Only

<style>
 .spacer {
  height: 100vh;
}

a {
  color: #3d3d3d;
  font-family: Arial, Helvetica, sans-serif;
}
/* The magic one liner that allows for smooth scrolls */
html {
  scroll-behavior: smooth;
}

  /* Removes the animation for users that don't prefer it */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
  
 </style>

<h1 id="top"><a href="#middle">Let's go to the middle of the page</a></h1> 

<div class="spacer">
  &nbsp;
</div>

<h1 id="middle"><a href="#bottom">Go to the bottom?</a></h1>

<div class="spacer">
  &nbsp;
</div>

<h1 id="bottom"><a href="#top">Nah, let's go back to the top</a></h1>

#sticky #scroll #sections

Creates a 'Sticky' Scroll effect with sections

#page .page-section {position: sticky!important; top: 0px!important} html {scroll-behavior: smooth} 

Here is the code from this tutorial with a little bit of a shadow to create even more depth between these pages sections. 

#page .page-section {position: sticky!important; top: 0px; box-shadow: 5px 5px 15px rgba(0,0,0,0.8)!important} html {scroll-behavior: smooth}

#js #scroll

Disable page scroll when button clicked

<script>
  $(".modal__open").click((e) => {
    e.preventDefault();
  	$('html')
    .css({
      'overflow-y': 'hidden'
    })
  })
  
  
  $(".modal__close").click((e) => {
    e.preventDefault();
  	$('html')
    .css({
      'overflow-y': 'scroll'
    })
  })
</script>

#js #scroll #css #setup

Page scroll setup

<style>
	html, body {
  		overflow-y: hidden;
  	}
</style>

<script>
  $(function(){
  setTimeout(function(){
    $('html')
    .css({
      'overflow-y': 'scroll'
    })
    
  	window.scrollTo(0, 0);
  }, 3000);
});
</script>

#ios #swift #scroll #horizontal #snippet

Horizontal scroll

    func setScrollView() {
        let contentWidth = topPlayersTableView.layer.frame.width + 20
        scrollView.contentSize = CGSize(width: contentWidth, height: scrollView.frame.height)
        scrollView.isPagingEnabled = true
    }

#hooks #scroll

Window Scroll simple

const [scroll, setScroll] = useState(false);
 useEffect(() => {
   window.addEventListener("scroll", () => {
     setScroll(window.scrollY > 50);
   });
 }, []);


className={scroll ? "bg-black" : "bg-white"}

#css #scroll #animation

Style an element based on the active Scroll Direction and Scroll Speed

https://www.bram.us/2023/10/23/css-scroll-detection/

#flutter #dart #scroll

Scroll horizontal and vertical

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyScrollableScreen(),
    );
  }
}

class MyScrollableScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Scrollable Screen'),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            children: List.generate(
              18, // Number of main views
              (rowIndex) => Container(
                height: 80, // Set the height of each row
                margin: EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 1.0),
                ),
                child: Row(
                  children: List.generate(
                    20, // Number of labels
                    (columnIndex) => Container(
                      width: 80, // Set the width of each label
                      child: Center(
                        child: Text('Label $columnIndex'),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

#css #scroll #animation

Create scroll-driven micro-interactions with animation-timeline and custom properties 🔥

https://codepen.io/jh3y/pen/XWOodoP

On-Scroll Animations & View Switch

Save snippets that work from anywhere online with our extensions

Comments

More like this

Scroll Animations

Browse more snippets >>

On-Scroll Animations & View Switch

Save snippets that work from anywhere online with our extensions

Comments

More like this

Scroll Animations

Browse more snippets >>

Embed code snippet