Scroll Magic animation scroll issue mobile

[kmytor]

 

I have a similar problem and I do not know what can help you,

and I can not make it work in codepen either

 

 

Thank you

 

 

See the Pen GzaYNN by kmytor (@kmytor) on CodePen

 

Edited February 25, 2019 by Shaun Gorneau
Moved from https://greensock.com/forums/topic/15411-scroll-magic-animation-but-only-on-mobile/

[Shaun Gorneau]

@kmytor,

 

The biggest issue with your CodePen example is that you are setting the position property to fixed

 

 

var AnimaWeb = new TimelineMax().add([
    TweenMax.to(".ass picture", 1, {
      top: "+=50%",
       position: fixed,
      delay: 0
    }),

 

In that way, the script is looking for the value of a variable fixed, not setting the value to 'fixed'

 

var AnimaWeb = new TimelineMax().add([
    TweenMax.to(".ass picture", 1, {
      top: "+=50%",
       position: 'fixed',
      delay: 0
    }),

 

 

Here is an updated codepen with that corrected along with chaining the Tweens and using a few set() methods.

 

See the Pen GeRKpe by sgorneau (@sgorneau) on CodePen

 

Also ... if you have further questions about this please start a new thread so as to not deter from @niallmckenna's questions.

 

Thanks!

[kmytor]

 

or by God as I do not fix many thanks.

but I do not understand why it was done with this action AnimaWeb.set (". ass picture", {position: 'fixed'}); ???

 

[Shaun Gorneau]

5 minutes ago, kmytor said:

 

but I do not understand why it was done with this action AnimaWeb.set (". ass picture", {position: 'fixed'}); ???

 

 

Hi @kmytor,

 

Using set() is quite different than to() or from() in that set() changes property values instantly (no tween). For example,

 

See the Pen xBxbwV by sgorneau (@sgorneau) on CodePen

 

In the above CodePen, the circle is tweened from x:0 to x:300 over 3 seconds and then immediately jumps to x:150 and then tweens from y:0 to y:100 for 2 seconds.

 

The reason I used set() for the position property is that all position values are non-numerical values ('static', 'relative', 'absolute', 'fixed', 'sticky', 'initial', 'inheret'). Tweens will not happen for those values ... it will just jump to them. So, for the sake of keeping things clear, I like to use a set() where anything will jump to a value immediately.

 

Note that when I say position can't be tweened, I mean the 'position' CSS property specifically. An element's position (i.e. placement) on the page can certainly be tweened with x, y, top, left, etc.

 

Hope this helps!

 

[kmytor]

 

disclpa another question There is a way to make a condition within a timeline like this here: