Skrollr Cheatsheet

Skrollr Cheatsheet

Is the default Skrollr anchor guide too confusing?

Try my new Skrollr cheatsheet to help you understand how Skrollr actually works.

Download Skrollr Cheatsheet

Skrollr Cheatsheet

Get my free Skrollr tips and save heaps of time!

The data-attribute tip, will save you hours if not days or weeks of figuring out. PLUS you'll get the first 2 videos from the popular Parallax Scrolling Master Class!

Enter your email below and I’ll send it right to your inbox!

100% Privacy. Guaranteed! Powered by ConvertKit

Feedback

What else do you think should be included in the Skrollr cheatsheet?

Let me know in the comments below.

25 thoughts on “Skrollr Cheatsheet

      1. Billy

        Thanks, Petr!

        By the way, that second one was data-(-)100-botttom-top (as there is no space between the dashes it could look like a single dash!).

        Also, many thanks for this awesome plugin! Keep up the good work!

        Reply
  1. Sheena Anagnostopoulos

    Hi Petr,
    When I first load my page, the background animations don’t work. After a minute or two, they do. Any reason these data-attributes might be stalling on load?

    Reply
  2. Zishan

    Hi Petr, You are GREAT. It’s help me a lot to understand parallax scroll. Please add in some more complicated combinations as Billy said.

    Reply
  3. Oliver Chalmers

    Petr, thanks a lot for these. I’ve been digging into ScrollMagic recently as i’m an avid GSAP user. Would your recommend skrollr for more basic uses over ScrollMagic?

    Reply
    1. Petr Tichy Post author

      Hi Oliver, it really depends on a few things, both are useful. I would recommend Skrollr for a simple to medium animations, anything more interactive is probably more suitable for ScrollMagic and GSAP.

      Reply
  4. Muhammed

    Awesome content. I just wanted to ask you that how do you make this responsive. How can I turn off skrollr.js for mobile devices? Thanks

    Reply
  5. Sarah Parnell

    Thanks for the cheat sheet – I keep staring at it trying to understand. I wish there was a better library of attributes – maybe more advanced combinations as Billy suggested. I know I’m trying to do something complex because I’m trying to use position: fixed; when it gets to a certain point. So, for example I have a div text that I want to come from the bottom to the center – stop at the center (by changing it’s attribute to fixed), and then scroll up off out of the view port when the next ‘scene’ loads… plus, I want to take it a step further by adding an absolute floating object at a different speed. I’d love to understand how to ‘control’ each property but these data positioning at times feels like you’re going in circles and unable to find the right location. It would be so nice if there was an x and y values but even still if I could understand how these positioning worked I’d be happy.

    Reply
  6. Sarah Parnell

    Yes, in fact I purchased both courses that’s kind of why I commented… LOL
    Great course btw, just having some trouble with the data-attributes and making them work; mainly because there are different set ups for example in one you might have background % and other times you have px dimensions. I’m having trouble understand when to use which metric with each data attributes.

    Reply
    1. Petr Tichy Post author

      Hi Sarah, have you tried to rewatch some of the videos? When to use % vs px depends on your concept. I would suggest watching some of the videos again or setting up a simple CodePen demo to really understand how the data-attributes work.

      Reply
  7. Oliver Chalmers

    Hey Petr,

    Thanks so much for all your help with skrollr and scrollmagic :)

    I have a question for you, which plugin would you reccommend I use to tackle a situation like this – http://www.sa-studio.fr/work/majestic

    I want to use either plugin to scroll through a div vertically but using transforms instead of regular scroll positions, thus having no scroll bars and having motion on the scrolling.

    Thanks again!

    Best,
    Oliver

    Reply
  8. Wasim Alatrash

    I purchased “Parallax Scrolling Master Class” but i can’t download Skrollr Cheatsheet, I checked my email and follow the link after subscription in this page https://ihatetomatoes.net/skrollr-cheatsheet/
    but there are no download link available.. please help

    Reply
  9. Wasim Alatrash

    Yes, i figured it out.. but i couldn’t remove the comment.. sorry ! I almost finish the workshop, I am digging in “Mobile and responsive workflow” section.. thanks for your amazing course

    Reply
  10. Nicole

    Hi! Thanks for the great tutorials. I am having some trouble understanding the skrollr cheat sheet. data-end=”opacity: 1″ data-400-end=”opacity:0″ would meet than once the div hits the bottom of the website it would be fully visible and once you scroll up to the point that the div is 400px from the bottom of the website it would be invisible with an opacity of 0, correct?

    I’m trying to display a div only once you scroll to the end of the site but it is appearing at different times and I’m not sure why. I have the same code on http://bit.ly/1LkaZsj and http://bit.ly/1Q7Colo but the contact info at the bottom is appearing differently.


    Name1
    Executive Vice President

    email
    tel

    Please let me know your thoughts as I’ve been running in circles trying to figure this out! Thank you!

    Reply
    1. Petr Tichy Post author

      Hi Nicole, thanks for using my cheat sheet to figure out Skrollr.

      Looks like you are using the right data-attributes, the contact info is invisible until the user scrolls to 400px from the bottom of the page and then it fades in.

      What is different on both pages is the overall length of the pages. If you make the bottom CREDITS section the same, both pages will fade the contact details at the same time.

      Edit: just realised that you are showing extra line with credits when the user clicks on the work CREDITS, that extends the length of the page.

      Hope that helps.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>