CSS animation questions (classes, scroll triggers)

Bootstrap Studio Help
1

Hey all.

Two questions about animation in BSS:

  1. Animation ‘presets’/‘classes’: Is there a way to create the equivalent of an animation ‘class’, so that an animation that is used in many places (eg. an entrance animation that is applied everywhere for consistency) can just be tweaked in one global place?

  2. Triggering CSS depending on scroll position: The animations available in the animation pane are great for entrance animations. I can see that it uses data classes which BS provides. How can I use this to trigger non-entrance CSS changes?

Example: Say I have a div, and I want to trigger its backdrop filter to change from 0 to 1 when the user scrolls to a certain position. How would I do that? This is different to the animations in the animation pane, because the div does not need to be ‘entranced’ - it needs to exist immediately. A CSS change (transition) simply needs to occur for a div/element based on page scroll position. It seems like all the data classes exist for such an implementation, as they allow the detection of the user’s scroll position. I just can’t work out how to use it as a trigger for whatever CSS transitions I want (ie. any purpose other than entrance animations).

Hope I explained that well enough. Any thoughts or examples I can check out?

Thanks.

2

I did it with this:

https://alligator.io/js/intersection-observer/

Maybe there’s another / a better way.

3

Thanks for that - good to know. That method looks like it’s definitely getting into deeper technical territory than I’m currently capable of though. If there was no other way, then I’d learn it - and may well still. I was hoping to use in-build BS capabilities to do it, and get some animations done literally overnight.

I will add that to my reading list - I do appreciate the info.

It seems like BS conveniently has everything needed, I just don’t know how to make it happen…

4

It is much easier than it looks, here is a sample file:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>Observer</title>
  <style>
    #section {
      width: 100%;
      height: auto;
      background: lightblue;
      margin-top: 50px;
    }

    #box {
      width: 100%;
      height: 200vh;
      margin: 0;
    }

    .red {
      background: red;
      transition: .5s;
    }

    .yellow {
      background: yellow;
      transition: .5s;
    }
  </style>
</head>

<body>

  <div id="section">Section</div>
  <div id="box">Box</div>

  <script>
    var observer = new IntersectionObserver(function (boxcolor) {
      if (boxcolor[0].intersectionRatio === 1)
        document.querySelector("#box").classList.add("red");
      else if (boxcolor[0].intersectionRatio === 0)
        document.querySelector("#box").classList.add("yellow");
      if (boxcolor[0].intersectionRatio === 1)
        document.querySelector("#box").classList.remove("yellow");
      else if (boxcolor[0].intersectionRatio === 0)
        document.querySelector("#box").classList.remove("red");
    }, { threshold: [0, 1] });
    observer.observe(document.querySelector("#section"));
  </script>

</body>

</html>

Save it to your hard drive, open it in the browser and watch the change when div id=“section” is scrolled out of the viewport.

The javascript adds and removes CSS classes, that’s all.

5

Thanks @Failix, that’s awesome. You’re right, it is a much simpler concept than I first figured by the instructions. Thanks so much for going to the effort to make it so clear.

6

You’re welcome!

There is also the possibility to change elements depending on the scroll position, here is a good example:

Fortunately the web is full of good examples … :sunglasses:

7

Thanks again. You’ve helped me see that JavaSscript is like a bull mastiff that looks vicious but just wants to play…

8

Enjoy it! It’s worth learning javascript. It’s not enough for me anymore to just copy, paste and customize all the time. I am now learning to really write it. :slightly_smiling_face:

1 Like
9

This is exactly how I’ve felt for last two years. It’s something I intend to do by the end of this year. I’m tired of just copying/pasting other people’s scripts. I have a basic idea of how certain things in javascript work, and I’ve successfully made small edits to scripts I’ve found online to suit my needs, but I really want to just dive in an learn the language. Fortunately, there are endless free resources available online.

10

Yes, I copied and modified, but rarely got the real connections. This is annoying, I want to know more.

Now I have really started at the very beginning and slowly the first light comes into the darkness. What do these strangely arranged characters mean, in what context are all these brackets?

And while I’m writing this, it occurs to me that my script from yesterday can be optimized (at least as far as my knowledge goes):

  <script>
    let observer = new IntersectionObserver(function (boxcolor) {
      if (boxcolor[0].intersectionRatio === 0) {
        document.querySelector("#box").classList.add("yellow");
        document.querySelector("#box").classList.remove("red");
      }
      else if (boxcolor[0].intersectionRatio === 1) {
        document.querySelector("#box").classList.add("red");
        document.querySelector("#box").classList.remove("yellow");
      }
    }, { threshold: [0, 1] });
    observer.observe(document.querySelector("#section"));
  </script>

By the way, I booked a paid video course for javascript. It’s in my native language, I got tons of exercise files and I can ask questions online. This helps me more than just watching videos on Youtube. 12 euros was not too much for this.

1 Like
11

@Failix
You can optimize your script even more like this

<script>
const observer = new IntersectionObserver((boxcolor) => {
  document.querySelector("#box").classList.toggle("yellow", boxcolor[0].intersectionRatio === 0);
  document.querySelector("#box").classList.toggle("red", boxcolor[0].intersectionRatio === 1);
}, {
  threshold: [0, 1]
});
observer.observe(document.querySelector("#section"));
</script>
12

@kuligaposten Thank you very much! I could have thought of the “toggle” myself. Other things I still have to learn, e.g. the arrow function.

13

@kuligaposten is our resident JS expert (even if he won’t accept the title - lol.)