Giter Site home page Giter Site logo

New features in v1.0 about scrolltrigger HOT 7 CLOSED

terwanerik avatar terwanerik commented on July 27, 2024 3
New features in v1.0

from scrolltrigger.

Comments (7)

thasmo avatar thasmo commented on July 27, 2024 2

It would be nice to define a function for the offset option, so it's possible to calculate the offset dynamically.

from scrolltrigger.

terwanerik avatar terwanerik commented on July 27, 2024 1

Yeah its scoped so this in the callback is the HTMLElement. It takes one attribute, the Trigger object itself, containing settings, position, the element etc.

from scrolltrigger.

terwanerik avatar terwanerik commented on July 27, 2024 1

The current version of ScrollTrigger (0.3.x) has this as well, check out the callScope and showCallback

from scrolltrigger.

Windvis avatar Windvis commented on July 27, 2024

Hey! These are the things I think that could be nice to have:

  1. Add a direction option which trigger the class only from certain directions (for. ex, only if you scroll from top to bottom)

  2. Add an option to trigger other elements based on the current position. For ex. If you refresh te page, trigger the elements that are above the current position. This of course would only make sense if directions are implemented (and in previous example only the elements with the top-down direction would be triggered).
    Another option would be to add new API methods which can make elements before or after a certain element / position visible or invisible.

  3. Make it possible to configure the data- attribute namespace. I can imagine that data-scroll can conflict with other libraries (or custom code) since it is really generic, adding an option to change the namespace would solve that.

  4. Make it possible to group similar elements. That way you don't have to repeat the data-attributes if you have multiple 'groups' of elements on the page with different options (so you can't set it in the default options). Custom attribute names could solve this as well, by giving each 'group' a different attribute. (This would require multiple ScrollTrigger instances though, is that a problem?)

  5. When you create a new instance of ScrollTrigger it automatically adds the invisible class to the elements. I think it would be better to make this optional. Some projects don't need this class so in that case these are unnecessary DOM changes.

  6. Add a callback which will be called right before ScrollTrigger adds / removes classes. This could then be used to check if the classes need to be added and influence ScrollTrigger by returning a boolean. Some of the previous points can be solved with this (if given the necessary parameters).

PS. I have limited experience with this library, so I'm sorry if some of this is already possible or if it's not useful at all.

from scrolltrigger.

terwanerik avatar terwanerik commented on July 27, 2024

Thanks for the input! The numbers 1, 3 and 6 will be implemented in v1.0. I'm going to handle 4 a little bit differently. The other points are not on the list for now, just because they take up a lot of time, and can be implemented in client side code.

I already started development (you can check it out in the v1.0 branch), by default the ScrollTrigger will init all html elements with the data-scroll attribute, you can then query all the triggers to change settings for a group of triggers. E.g. something like this:

const trigger = new ScrollTrigger()
const h1s = trigger.query('h1')

h1s.forEach((h1) => {
  h1.once = true
})

You can also add new triggers to the ScrollTrigger by using a query, and giving a set of options for that group of triggers.

from scrolltrigger.

Jeremy-Knudsen avatar Jeremy-Knudsen commented on July 27, 2024

Re: #6, would the callback pass back the triggered element so that it could allow me to call my own JavaScript functions? That way, upon an element being triggered (let's say it's a video), I could then call my own JavaScript function to play the video. I would like the element to be passed back in the callback so that I could read it's data-attributes as well. Also, it would be great if I can use the scroll position to manipulate the triggered element.

from scrolltrigger.

Jeremy-Knudsen avatar Jeremy-Knudsen commented on July 27, 2024

The main reason I checked out ScrollTrigger was because of its small payload, as opposed to ScrollMagic. However, ScrollMagic had those features.... I'll try out ScrollTrigger again. Thanks @terwanerik !

from scrolltrigger.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.