How to go to specific tween level?

[Mhd Jarkas]

I'm working on website using Tween and superscrollorama. everything is OK and I did all what I need.

 

I have website menu which contains the website structure, I need when click on about us go to About us section which already is animated with tween.

 

how can  I do that??

 

Thank you

[Rodrigo]

Hi and welcome to the GreenSock forums.
 
It's really hard to visualize what the issue could be with the information you're providing right now. Please take a look at this post in order to create a reduced sample, that helps everyone in the team to see and solve users' issues:
 
http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/
 
Now for what I read I'm assuming that you want to click on a menu button and make the page scroll to that position and therefore run the scrollorama animation. If that's the case you can use GSAP's ScrollTo Plugin:
 
http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/ScrollToPlugin.min.js

 

Or you can download it with the rest of the free tools by clicking in the top/left corner button that says: "Get GSAP". Is super simple to use and the results are great, you can see this sample:

 

http://codeaway.info/greensock-animation-platform-scroll-to-plugin-sample/

 

Rodrigo.

[Mhd Jarkas]

Thank you for your reply, I tried to use ScrollTo plugin but it didn't work.

I think the problem is css of this divs because some of them are not shown in the page till reach the tween code.

 

you can check the demo below:

http://phantom-uae.com/demo

 

I want when click on menu item play the animation till reach the target div.

[Rodrigo]

Hi,

 

If I click on What we do the window scrolls to that element's position, you just have to remove the alert call in order to see it. Now if you want all the animations of what we do to be played during that scroll, you should scroll to the next element offset position minus a couple of pixels. Again a reduced sample in codepen with code we can actually interact with, it'd help speed up support, please see if you can make that effort.

 

Maybe this is a little late but for your next project you should check the complete re-write of superscrollorama made by Jan Paepke, scroll magic:

 

http://janpaepke.github.io/ScrollMagic/

 

Rodrigo.

[Mhd Jarkas]

Thank you for your reply, I checked it and tried to fix.

 

It's working now but I couldn't take offset of the Div because all of the are in the same level, you can find below the code working:

$("#lkWhyUs").click(function()
{    TweenLite.to(window, 10, {scrollTo:3500});    });

but my problem now is the big screens because It will not scrolling to the targert div exactly.

 

you can check it online: http://www.phantom-uae.com

[Carl]

Hi,

 

These issues seem to be much more related to Superscrollorama and perhaps more general JavaScript / Web-dev issues. We have to stay focused on offering support related to the GSAP API. Occasionally other topics are easy enough for us to answer that we don't mind going beyond our normal realm of focus. In those cases though its absolutely imperative that you make as much effort as possible to clearly explain the situation and offer us a clean (and simple) demo that we can view and edit. 

 

We have found the best way is for you to create a CodePen demo as mentioned by Rodrigo previously: 

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Poking through hundreds of lines of css / html / and javascript via dev tools is simple too time consuming when dealing with a site of this complexity.