Jump to content
Search Community

How to go to specific tween level?

Mhd Jarkas test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
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.
×
×
  • Create New...