Jump to content
GreenSock

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

Search the Community

Showing results for tags 'position'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hi, I need some help with positioning the div. I have three main sections with 100vh. The middle sections have six more sections. What I am trying to achieve is when the user scroll to middle section the scroll does not move to last section until it finish scrolling the child sections of main middle section. Does anyone know how I can achieve that with gsap. I have tried below solution, ut its not working for me. Thanks
  2. The secret to building gorgeous sequences with precise timing is understanding the position parameter which is used in many methods throughout GSAP. This one super-flexible parameter controls the placement of your tweens, labels, callbacks, pauses, and even nested timelines, so you'll be able to literally place anything anywhere in any sequence. Watch the video For a quick overview of the position parameter, check out this video from the "GSAP 3 Express" course by Snorkl.tv - one of the best ways to learn the basics of GSAP 3. Using position with gsap.to() This a
  3. Eddy1015

    Fix logo on top

    Hi there. I'm new to Greensock and struggle at my first animation. What I'm trying to do: shrink the logo, change the background of the header to transparent (got a background video) move the logo in the header up fix the logo to the top Any suggestions? 🙂 Thanks in advance, Eddy
  4. Hi everyone! Sorry, if the answer is already there, but I couldn't find it. I have 2 SVG tags. 1) Source SVG sprite with 2 <rect> shapes. 2) And the second SVG is pulling elements from the first SVG with <use> tag. The task is to move both shapes from the source SVG to the same point (x, y) using your library. Now they are moving together and to different points. Thanks for your attention, and any help would be greatly appreciated. Thank you!
  5. Hiya everyone. I am new here but really hoping someone can help me out as I would love to use this amazing library to achieve this cool effect just posted on codrops; (https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/). You'll see in the article it explains that the effect works on the direction of your cursor - actually it has two effects, one for when the image is revealed/hidden and the other for moving the mouse over the nav title. I'm trying to adapt the direction based element of this effect into a Webflow project and I am struggl
  6. Dears, i have created an svg rect inside a group and i have make this svg group to have "transformOrigin:'center center' " explicitly then draw a little blue circle at this group returned position my question is when i am trying to rotate the svg group then resize it the return location is wrong and it's not at the center of this group, how i can keep my reference point at the center of this group all the time with all different transformation? https://codepen.io/Shouha85/pen/MWgxNwP?editors=1010
  7. I'm trying to move paths created in a Illustrator to a given position. In the codePen, I move the group, then morph the balloon and move the stars. The 2 targets are positioned at 100,300 and 300,300 (in pixels) in Illustrator. I've tried a variety of techniques but none seem to work...
  8. Hey everyone, I have recreated the card animation from the iOS app store, but having problems with the positioning when wrapping multiple cards on to one line. In the attached pen, when the user clicks a card, the card should expand to the whole screen and at the same time reposition to the top of the viewport. The animation works great for the first card in each row, but every card after that in a row will not travel to the top of the viewport and stops about halfway up the page. Anyone have any suggestions on how to correct this unwanted behavior?
  9. Hi, I've created a TimelineMax instance with a series of child TweenMax animations. I need to play the timeline backward and forward to transition between two states. This works great. When executing a reverse() only, I want some of the child animations to have lower position values, to speed up the animation as a whole. I keep references to the ones I want to target, and then use remove() to strip them from the timeline, before then re-adding them for the reverse(), with revised values. I've scoured the forum for an answer and have read much about how changing child t
  10. Hey guys, I am new to all of this and trying really hard to create a banner where 3 lines of text stagger in ( from left to right ) then bounce and then slowly fade out. Would also love the option to repeat this every so many seconds. I have explored the repeat -1 option, but cannot find the option to repeat an action every so many second. Question: How can i fade out from where the animation last ended? Thank you guys in advance and Gsap is Awesome!
  11. I'd like to have a dynamic duration for a tween. Example: A button animates and builds itself up. Then the text animates. While the text animates I want the button to scale just a tiny bit. The scale should exactly end when the text animation is complete. During development the timing of the text animation changes extremely often and differs dramatically. Remembering to set the scale duration by hand is annoying and unnecessary distraction. Calculating the timings of all the parts building the text animation is even more annoying. I'd love the scale-animation to have a dynamic d
  12. Playing with the machine gun text effect from http://codepen.io/mfgpker/pen/cmiue?editors=1010 I need to be able to export these frames as PNG images but running into some trouble because of the way foreignObjects are seen I suppose. The original version of the machine gun text animation used jquery to create and address elements and, though the text was visible in the resulting PNG exports, the positioning information was completely ignored - even though the animation runs fine in the browser. So, I decided to go to great pains to namespace everything in case that was the issue.
  13. Hi Guys, I'm trying to achieve something that probably is very simple but I think i surely missing something. So let's say I have a draggable in the position x:800 y: 200 Now I drag it to the position x:500 y:100, and after releasing the draggable, and from this point onward, I want to make the origin of the draggable this last position. So all the transformations would be applied from this last position. I hope my explanation makes sense . Is there a simple way of achieving this? Thanks.
  14. If i repeat timeline comand tl.from(head, 0.5, {left:100}); it will repeat objects movement stating from position defined in css. Is it possible to move same object several times from previous position? So instead of tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:200}); - 100px tl.from(head, 0.5, {left:300}); - 100px it would be tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:100}); - 100px
  15. I'm using Draggable to give a few elements the option to be dragged around the viewport. I have a function that I'm calling later on that needs the position (x,y) of these dragged items. Is it possible to get the x and y values of those dragged elements? OffsetTop is not working due to the 3d translates.
  16. Hello, I'm expanding on a pen I already posted a couple of days ago, and trying to figure out ways to write a cleaner timeline. The whole thing will be a sequence of images, or slides, always fading to the next. In the example there are 3, but they might as well be 100. For the basic behaviour, fading in and out, I have this: $.each($('.slide'), function(i) { tl.add([ TweenMax.to($('.slide-' + (i+1)), 1, { opacity: 0, immediateRender: false }), TweenMax.to($('.slide-' + (i+2)), 1, { opacity: 1, immediateRender:
  17. Hi Greensocks, after reading tons of topics on the subject of animating svg I did not find an answer that works properly for my goal. Now I desperately need your help: Elements inside my svg are scaled to 2.8 by click. After that I need them to be centered inside the viewbox. Scaling works fine, centering does not. Do you have any suggestions? Cheers Gregor
  18. Hello, I'm trying to make an animation where at some point there's a sequence of images, one on top of each other, with each image just disappearing to show the one right below. They are absolute positioned and I'm controlling their appearance by simply tweening their opacity. Since I don't want a fade effect, I thought I would set the duration to 0. But this way it seems to ignore the position parameter I set. In the pen I created, I'm expecting to see the number 1, first. And after 1 second of scrolling down, the number 2. Instead, it appears directly the number 2 and the weird thing is
  19. Hi everyone, I recreated a codepen that replicate more or less my problem (for using that click somewhere in the white area) I'm trying to achieve something like the one you can see. I need to open a "fixed popup" that everytime change it's initial position. If you try the pen everything works fine for the only first click but if you try to click again you can see that the "modal" still opening from the position you clicked the first time. Can anyone explain whats is going on? ps: I added a delay so you can see clearly what's is going on. Thanks eveyone!
  20. Hey guys, I am totally new to GSAP (I just started using it last night), not to mention a junior developer in general. I want to animate some elements on a page to move accross the page and fade out, all with the same class. The part I am confused about though, is that in order for the elements to move they must be given a position property of absolute or fixed. (At least that's what the greensock tutorial said I had to do). When I apply this position property to the elements with the class I want to animate, they all stack on top of each other in the same place. How do I keep
  21. Hi. I have trouble with Safari browser positioning of elements with TweenMax x and y. In all browsers car at this position: But in Safari car at the another position: Code: TweenMax.to("#car", 0.1, {x: 530, y: 262, scale: 0.6, transformOrigin: "50% 50%"}); How to fix it?
  22. Hi, im working in this Bezier animation: TweenMax.to(myFish, 5, {bezier:{curviness:2.1, values:[{x:0, y:-100},{x:150, y:-200},{x:0, y:-400},{x:-100, y:-500},{x:0, y:-700},{x:0, y:-900}],autoRotate:["x","y","rotation",90,false]}, ease:Power1.easeInOut}); What i want to do is the next: I'm trying to simulate a fish swimming, everything is ok, but when the user do "touchstart" on the fish, this action will kill the tween but also I want to make this draggable, so I'm not sure if this could be, because I suppose I need the current position (top,left) to start the drag stuff. so.. any
  23. Hi All, Is there a way to make a smooth transition when changing from position absolute to position relative. You can see the jump in the demo.
  24. I can get position values during a drag (using Draggable). But can I get position values during a Throw (using throwProps)?
×