Jump to content
Search Community

New feature

TRFC 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 am a novice at writing Javascript and I know my coding is terrible. I have been creating a few examples of moving elements around the screen as part of my learning. I just discovered GSAP and marvel at the capability. i have stopped my writing and am now spending time learning how GSAP works -- a long way to go before I create some of those fancy animations.

 

Anyway, there is one feature jwt_move that I coded and seems to be missing from GSAP.

 

In the x and y options for the basic moves, in addition to number of px,  I also coded in"left"  "right"   "center"   "top"   "bottom"  "middle" which would move the element to the edge of the viewport.    In addiion, I coded a bounds/nobounds option  and if 'edge' is selected for this option, a move of say 10000px would stop at the edge of the viewport.

 

In addition, I could move an element to the viewport edge and then offset from that edge by a number of px using 'offsetX. The web site has my example. There is some simple documentation for the options at:-
http://www.trfc.me/jwt_scripts/documentation/jwt_move_description.shtml

 

The example:

http://www.trfc.me/jwt_scripts/examples/jwt_move_example.shtml

 

I have not found a way of doing these functions with GSAP.

 

Please don't criticise my coding -- I know it is terrible -- but what it does is a feature I could not find in GSAP.

 

Note: if the viewport size is known, maybe scale  could also be limited to the viewport edge as an option.

See the Pen jwt_move_example.shtml by jwt_scripts (@jwt_scripts) on CodePen

Link to comment
Share on other sites

thank you for the example code --looking through these types helps me as a starter. I will also check out the links.

Not quite what I was asking about.

 

Say i am on a big page and have scolled down a section and also scrolled across a section. (say mid way down and midway across)

 

I would then like to say in the Tween    x:"right" and the element would move to the edge of the viewable screen (which might not be the extent of the window)

same for x:"left"    x:"middle"       and also the same for the y direction.

 

I think the Tween code will need to calculate the scrolled distance. screen right being something like :-

x=(window.innerWidth||document.body.clientWidth||document.documentElement.clientWidth)+(window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft)

Link to comment
Share on other sites

Allow me to decribe a little better.

In the Codepen example given above, add the line      <div style="width:2000px, height:2000px"> </div>

This will put scrollbars at the right side and the bottom side. Then, in the example, move the scoll bars approx. midway.

 

I want the ball to move around in this viewable pane.

Link to comment
Share on other sites

Here is a codepen of what I would like to be able to do in GSAP

See the Pen eNdbLN by anon (@anon) on CodePen

 

I have created a script  jwt_animate which has the same syntax as tweenMax.

This script contains some code to detect x:"right"    y:"bottom"  and also offsetX:n    offsetY:n  which are not supported by TweenMax and then proceeses the numbers to get Tweenmax to run.

Note : the scollbars have been set such that the page starts offset from left and right.

 

My script find the view window relative to 0,0  and then converts "right"    "bottom" into the left  top coordinates.

the x and yare replaced by the offsetX and offsetY values  (which in most cases will be set to 0)

 

Change the window size.  The box will always move to the edge of the viewwindow -- even when scrooled across/down the page.

 

Is there a simpler way to do this ?

Link to comment
Share on other sites

  • 1 year later...

Coming back to this topic after about 2 years just to see if there is any solution now. To recap :-   All I want to do is to position an element (div or img) at the centre of the screen  (not centre of the browser window) WHEN the page has been scrolled down and across.

 

You gave me a solution to centre in the browser window but what I want is to centre on the screen when the page has been scrolled.

 

Basically one reason for this is that I want to invoke a pop-up message on centre screen (do a display: block) when the page has been scrolled down and maybe across.Need a routine to determine the screen centre and then to use GSAP  x, y, left,  top,  xPercent etc. to move the element to this centre position.
 

Link to comment
Share on other sites

Coming back to this topic after about 2 years just to see if there is any solution now. To recap :-   All I want to do is to position an element (div or img) at the centre of the screen  (not centre of the browser window) WHEN the page has been scrolled down and across.

 

You gave me a solution to centre in the browser window but what I want is to centre on the screen when the page has been scrolled.

 

Basically one reason for this is that I want to invoke a pop-up message on centre screen (do a display: block) when the page has been scrolled down and maybe across.Need a routine to determine the screen centre and then to use GSAP  x, y, left,  top,  xPercent etc. to move the element to this centre position.

 

 

I think you need help from @carl or @jonathan. Or you can talk with @jack the greensock father! I am confuse on what you are trying to do anyway! Thanks for your post! Welcome to GSAP forum!

Link to comment
Share on other sites

I don't understand what you mean by the difference between center of browser window and center of screen? Do you really mean that you want a traditional popup (which 98% of browsers will block) that will sit somewhere on top of the existing browser window and you want GSAP to animate its position?

 

Can you please provide a few screenshots of the design you are trying to do?  With my current understanding, I'm doubtful this is something that a solution for this is something that we will be able to accommodate. 

  • Like 1
Link to comment
Share on other sites

After further consideration I suspect that maybe you mean something more like:

 

 

var count = 0;
TweenLite.set("#message", {xPercent:-50, yPercent:-50})
$(window).on('scroll', _.throttle(doSomething, 50)); // will fire every 50 milliseconds while scrolling
$(window).on('resize', _.debounce(doSomething, 100)); // will happen 100 milliseconds after resize done




function doSomething() {
  TweenLite.to("#message", 0.2, {y:$(window).scrollTop() + (window.innerHeight / 2),
                                x:$(window).scrollLeft() + (window.innerWidth / 2)})
}

 

demo: http://codepen.io/GreenSock/pen/JRKWpb?editors=0010

 

please read about throttling and debouncing: https://css-tricks.com/debouncing-throttling-explained-examples/

  • Like 1
Link to comment
Share on other sites

Thank you Carl,

I will study your code and do some homework. I think this is on the right track as I was using javascripts (before finding GSAP) to work out the screen centre, top, right etc. My javascript code used the commands scrolltop and window .inner height.

 

Learning about putting an equation into the tween call line is very helpful. I guess I could put jwt_move_right into the Tween call line and then get a function to return x:value, left:value, xPercent:value.

 

I find out about the screen location using this code :

function jwt_view(Jname){
//Jget=document.getElementById(Jname);
var Js=[];
Js.w=document.getElementById(Jname).offsetWidth;
Js.h=document.getElementById(Jname).offsetHeight;
Js.screenX=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0);
Js.screenY=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0);
Js.left =(window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0);
Js.top=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);
Js.centre = Js.left + (Js.screenX/2);
Js.middle = Js.top + (Js.screenY/2);
Js.right = Js.left + Js.screenX;
Js.bottom = Js.top + Js.screenY;
return Js;
}​

 

I then use some code for moveX:top   moveX:right to convert it to Tween commands

if (Joptions.moveX=="right"){Joptions.left=Js.right;Joptions.x=parseInt(Joptions.offsetX)||0;Joptions.xPercent="-100%";Joptions.position='absolute'};

 

I then do a document.write to get the correct commands in the Tween call line.

 

Sorry for a long message.

 

Basically I want to be able to write in the Tween call line containing   MoveX:top  and get this to run a function to return the left: and the xPercent: values

 

 

To answer your earlier question where you said you didn't understand my requirement.

I have a page which is scrolled down and scrolled across  -- i.e. a big page -- with scroll bars showing.

I wand to move an element to the top, left, right, bottom or middle  of this scrolled (visible on the computer screen)  screen.

 

Thank you for you last answer -- calling a function from the Tween call line and returning some Tween parameters will do the trick.

 

Thanks

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...