Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kmytor

Scroll Magic animation scroll issue mobile

Recommended Posts

 

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 by Shaun Gorneau
Moved from https://greensock.com/forums/topic/15411-scroll-magic-animation-but-only-on-mobile/
Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

 

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'}); ???


 

Link to comment
Share on other sites

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!

 

  • Like 3
Link to comment
Share on other sites

 

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

 

 

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×