problem defining trigger property values [ScrollTrigger plugin] trigger: '#p1', trigger: 'p1',

[Alexandr Tyurin]

I can't figure out the trigger property (ScrollTrigger plugin)
In this aparlax animation

the values are incorrectly specified, for example:
        trigger: 'p1' or trigger: 'img1'
instead of the correct values 
        trigger: '#p1' or trigger: '#img1'
However, the parallax itself works satisfactorily.
In case I specify the values correctly using '#', the parallax does not work properly - for example the second layer (#img2 - image of a small rock on the right) starts to scale not from the very beginning but after about 20% of scrolling.
Please help me to understand the problem.

See the Pen KKjPZJX by AlexandrTyurin (@AlexandrTyurin) on CodePen

[mvaneijgen]

To me they seem to work perfectly with # I would figure that they wouldn't work without, but maybe it by default tries to get the ID of an element.

 

I've updated your pen to include the ScrollTrigger markers, so that you can visually see what is happening, I've also giving each ScrollTrigger and ID, so that we can identify it better. As you can see rock 3 start trigger is lower on the page, so it starts later. 

 

Personally I would build this using a timeline. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Starting just with a timeline animation it will be much easier to make sure what you want to happen is happening and then it will be trivial to hook it to ScrollTrigger (and it will only use one ScrollTrigger instead of the 5 you have now) 

 

Let is know if this is something you could work with. Hope it helps and happy tweening! 

 

See the Pen yLdBvvQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Side note: scrub: 0 seems weird to me, scrub can either be true or false or a number, but higher then 0. I have the feeling that scrub: 0 is the same as scrub: true, but 0 feels like it should be false. 

 

Here is how I would build it using one timeline and one ScrollTrigger, as you can see ScrollTrigger is disabled and GSDevTools enabled so that we can inspect the animation better then if that is correct you can enable ScrollTrigger to see how it would work on scroll. Note that I've add some position parameter to certain tweens to have them start at the same time. 

 

See the Pen YzoKevp?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[Alexandr Tyurin]

Thanks for your help - great explanation and tips!