Scroll scene inside a <div> inside <body>

Pinegrow Interactions Add-on
1

Hello everyone, just started to use the interactions / scroll scene and I have to say this is a very nice tool ! instant feedback, really fast to use and timeline is a gamechanger !, but when I’m using scroll snapping like so (scrollwrapper is used for mandatory scroll snapping).

<html>
 <header>
 </header>
 <body>
 <div scrollwrapper>
   <div child1>
   </div
   <div child2>
   </div
 </div>
</body>

the auto detection of start/end is not working when having such a scrolling method, is there a way I can tell the scroll scene to use scrollwrapper as scroll reference instead of the body ? (I guess this is the issue, but I may be wrong). Even when trying to add custom start/end the scrolling progress stays 0%

Thanks in advance for your answers !

EDIT: just saw that I can snap and smooth scroll inside the interactions menu… maybe the solution is there I did code everything from scratch until now ^^

2

Hey @Eisteed,
Not sure I quite get the question. Is the ‘scrollwrapper’ attribute part of some JS library? You can target this as an attribute for your target. Just use $[scrollwrapper] for the target. I would have to get some sample file to give you any additional advice.
Cheers,
Bob

3

No scrollwrapper is just my custom css class like so
.scrollwrapper{ height: 100vh ; width: 100vw ; overflow-y: visible ; overflow-x: hidden ; margin: 0 ; padding: 0 ; scroll-snap-type: y mandatory; scroll-padding: 0; }

and child like that
.child{ position:relative; scroll-snap-align: start; min-height: 100vh; }

just posted this message by missclick, will post a full example on later edit
my first post was pseudo code for an example not the actual code

4

Here’s a full example

5

So I understand your page structure, but what are you trying to accomplish and what isn’t working?
Bob

6

I’m trying to use this page structure with pinegrow scroll scene
But the “scrolling detection” auto or manual (start and end) is never triggered when scrolling the scrollwrapper div, only when scrolling the body apparently

7

I understand your structure, are you trying to trigger animation in each child? Are you looking for scroll-snapping (autoscroll to next section)?
For scroll scenes there are four markers:

  1. A location in the viewport for animation to start - for example the bottom of the viewport
  2. A start trigger - when that trigger scrolls past the start location, any animation will start to occur
  3. An end location - for example the top of the viewport
  4. An end trigger - when that trigger crolls past the end location any animation will stop

Any other info about what your are doing/trying with interactions would be helpful.
Cheers,
Bob

8

Alright after rebuilding a simple version of the problem I manage to get it working.
The scrollscene is working as intended when applied on a child div (in my example) but not when applied on a H1 of child div for example.

Also, it’s working when scroll mandatory is assign to <html> and <div wrapper> is not used, but this solution is quite buggy on chrome.

I’ve made a full pinegrow project because it’s a bit hard to explain ^^ and maybe my usage of pinegrow interaction/scroll scene is not rigth I’m pretty new to it (but I did not manage to get the same snapping result with pinegrow as when using css mandatory).

https://mega.nz/file/GY8nUCzB#OwHDErCxva3TbRLoomSBnFrBFtCPhBJwHPG2uh-gfzQ

In this project the first title is not animated
The second is animated using scroll scene on itself
The last is animated using scroll scene on the parent div

Only in the second case using wrapper div the scroll animation is not triggered.

9

I know I’m asking a lot of questions, but I’m not sure I fully understand your problem. If I look at you project, everything seems to work as I would expect.
For the third title (second animation) when do you want the animation to start and end? I think you are not getting quite the effect you want because you are triggering the animation with the title still off the viewport. So, the majority of the animation occurs before you can see the animated element.

10

I can understand, Eisteed has problem with Pinegrow scroll scene. I like interactions. But since the update and the “new” scroll scene this feature has cost me hours (!) and nerves. Still I cannot use it. Simply because I don’t understand it.
A very basic case. I scroll down and down and I want that the next picture fade in from left. No way, I don’t get it, perhaps scroll scene is the false tool? - I would like a super-basic tutorial for dummies :slight_smile: