Search the Community
Showing results for tags 'offset'.
Found 16 results
-
I'm trying to understand what the negative delay is doing for the Y based tween in this snowfall codepen. I am currently experiencing an issue that does not make any sense where my implementation, being setup almost identically to this codepen, does this weird thing where using a negative delay causes the looped Y based tween of some of the elements (not all) to start abruptly "on screen" even though it was originally set (using gsap.set) to start somewhere off screen. Removing the delay parameter of the tween unfortunately causes all of the elements to drop down at the same time but they all correctly start off screen. The negative delay is the only thing that helps the animation start with a full screen of snowflakes. I read in a separate post that: "A negative repeat delay will restart it before it finishes." If true, then why does it not happen in the codepen linked where the snowflakes fall perfectly from the top to the bottom of the screen? In my tests some start above the screen but others show up abruptly on screen. This has been driving me crazy 😮💨, appreciate any help anyone could provide. -
Hello. Hope you're all good. I have a problem where I can't find a solution and I was wondering if I can get an idea. In the previous pen I have an horizontal scroller ( not the same in my current project but something really close to the pen ) followed by a carousel that scrolls one by one on each scroll. This was inspired by this pen: https://codepen.io/GreenSock/pen/rNOebyo. Now the problem: in my pen and the one from the demos the start and end of each box is based on the window innerHeight and I can't figure it out on how I can start it once the user hits the carousel. The main idea -> goes through the horizontal scroller, the centered carousel is pinned, scrolls for like 300vh ( 100 vh = 1 scroll ) and then goes to next section. This isn't the only idea I tried various way of getting the offset().top of the centered carousel to start from there but without any success. Isolated carousel just in case: https://codepen.io/visualbadger/pen/yLbNxYW Thanks in advance and wish you a splendid day. The pen with the carousel and the horizontal scroller: -
Hi all, Thanks for the great work on the ScrollTrigger plugin. Its a joy to use! I was wondering if its possible to have a custom offset for the pin functionality? I am animating a video based on the ScrollTrigger progress. Additionally, I want the video element to be pinned at the top. This works just great using pin: true Now I ran into a small issue: I want to start the animation when the element comes into view, but only have it pinned once it reaches the top of the viewport. Setting the start position to start: "top 50%" makes the animation play when the trigger is entering the viewport, but it also sticks the element to its current position. What I would need is a "pinOffset" or a "pinPosition". A very ugly workaround that kinda works: ScrollTrigger.create({ trigger: parentSection, pin: false, start: () => "top 50%", end: () => "200% bottom", onEnter: (self) => { self.refresh(true); ScrollTrigger.create({ trigger: parentSection, pin: true }); }, onUpdate: ({ progress }) => { playAnimation(progress); } });
-
Hey! So I have a timeline loop that should loop infinitely, each new timeline has a negative offset to keep the loop from having a gap at the beginning of each timeline I can achieve the desired effect by adding the same timeline with negative delay multiple times ( lots of timeline.add(anim(), "-=3") ) But for some reason today I can't wrap my brain around how to do this nicely? I have tried various things, negative repeatDelay, onComplete set time() / progress(), but none of them quite work. Something like 2 timelines and the second one loops forever sounds like the right way to do it? Please look at the codepen and all should be made clear, on each 'repeat' of the master timeline there is a gap Thank you in advance ? I'm so sure it's something really simple that I'm overlooking!?!
-
Hey community! Can't figure this one out. I need your help! <3 I want to tween a path from "0% 0%" to "0% 100%" with the drawSVG plugin, but it behaves like the 0-position is offset from the actual beginning of the path. When I flip it around to "100% 100%" to "0% 100%" it works fine. Clueless 0.o // It seems like 0% is offset from the beginning of the path TweenMax.fromTo("#backPathP", 0.5, {drawSVG: "0% 0%"}, {drawSVG: "0% 100%", repeat: -1, yoyo: true }) // If I flip it over it behaves like I want to // TweenMax.fromTo("#backPathP", 0.5, {drawSVG: "100% 100%"}, {drawSVG: "0% 100%", repeat: -1, yoyo: true })
-
I have a sequence of Tweens in a timeline that are staggered by 0.2 seconds. I want them to start 2 seconds early (before the white box fades out) How do I get dot2 to follow dot1 sequentially? Thanks
-
I have a horizontal gallery that is positioned centered on the page. I have a left and right button which slide the gallery left and right using TweenMax timeline on mouse hover. The right button is hidden on page load and I want to show the right button once the gallery reaches a certain offset position. If I use Jquery scroll I can detect the changing offset position of the gallery but if the user hovers on the button I can't get the changing offset position of the gallery while the gallery is tweening. How can I get the moving offset position of the gallery during mouse hover?
-
Just finished making these two short codepens to demonstrate. This Draggable has a separate drag handle for the drag item, and on release it scales the entire drag item up. If you click on the handle while it's scaled up, I want the item to shrink back to it's normal size only while you are dragging. However, I can't figure out how to make it stay under your mouse where you actually clicked the handle. codepen 1 - instantly scale-down: http://codepen.io/anon/pen/VerJdJ codepen 2 - animate scale-down (this is what i would prefer if possible): http://codepen.io/anon/pen/JGOQYZ I thought maybe while scaling, if I could change the transform origin to where the mouse pointer is that would fix it, but unfortunately there are other coordinates in the application that rely on the transformOrigin being 50%, 50%. Is there a way to do this? Outcome: 1.) The item shrinks but is no longer under your mouse pointer. Even attempting to relocate it manually seems wonky (see codepen and other things I have tried below) Expected Outcome: 1.) the item shrinks and remains attached at the same offset to the mouse (appearing to scale at your mouse point, as if your mouse point were the origin) Things I have tried: 1.) in the onDragPress, I attempted to get the the mouse coordinates within the drag target's container and instantly relocate the item to those coordinates. That results in bazaar behavior. 2.) I've attempted calling myDraggable.update() before and during setting the scalethe scale animation, and onDragMove Any help is appreciated, thanks a lot in advance! Also, let me say: TimelineLite and TweenLite are some of the most incredible libraries I've used. Pushing my company to purchase a member license.
-
Transform Manager works GREAT in general, first off. But, when I apply a ColorMatrixFilter to a container - in this case taking the whole design area and applying a greyscale effect - the TransformManager selection box / handles show up offset up and left from the actual target. The filter applied looks like- _greyScaleEnabled == true; var matrix:Array = new Array(); matrix=matrix.concat([0.5,0.5,0.5,0,0]);// red matrix=matrix.concat([0.5,0.5,0.5,0,0]);// green matrix=matrix.concat([0.5,0.5,0.5,0,0]);// blue matrix=matrix.concat([0,0,0,1,0]);// alpha var greyscaleFilter:ColorMatrixFilter=new ColorMatrixFilter(matrix); applyCanvasMatrixFilter(greyscaleFilter) applied to the layers container (where all the interactive objects are in child containers for different layers) public function applyCanvasMatrixFilter( $matrixFilter:ColorMatrixFilter ):void { if (!_myFilters) { _myFilters = []; } _myFilters.push($matrixFilter); _layersContainer.filters = _myFilters; } From this point on, after the TransformTool had been positioned perfectly up until this point, it will now be offset significantly up and left. It seems there may be some kind of translation from child x,y position to the stage position / transform tool container (localToGlobal or similar?) that might not be working right when a filter like this is applied to a grandparent of the target object. Scale is at play too of both the target object and the container object as well. Is this a known bug, or are there configurations for the TransformTool that will help correct offset? Does applying a filter to a parent container wipe out location data of child objects in flash somehow? Thanks so much for any insight on how to fix this... -
Hello. Is there a way to animate offset position? I'm trying to drop an element smoothly, using Jquery UI draggable and droppable, but I can't use left and top position as references. I really need to animate the offset position and an element is dropped. Any help?
-
Hello everybody ! How are you there ? Since my last post here, I improved a lot of things and I changed color of my illustration (not yet in function of the local time, but it's coming ! ), thank's to Diaco.AW Here is the codepen attached to this topic : http://codepen.io/BibiCoding/pen/VLpLmW But today I'm here because I have an initial gradient with 13 children "stop", but then in the other gradient, I would like to have only 7 colors in the gradient. That's why I decided to include Jquery to select children, then to make a table for new colors that I want ( couleurCiel[] ). I've done a loop with the var "c" which represent a child of the gradient (incremented at the end of the loop with "c++" and the var "i" to watch the associated table. There's an other table "offset[]" with value of the new gradient offset i would like to have. But you'll see in the codepen that without changing the offset, it only change the color of the "Defaults" gradient but not it's offset, so that there is a huge black gap on the top ! The question is : How i could change the gradient offset and include this in my loop ? And is my code well written ? The staggerFromTo is a good solution in my case ? Moreover, you'll see that the animation is not really fancy, it goes one color after an other and it would be wonderfull if each children could changes at the same time (overlapping tweens ?) Thanks a lot and have a nice sunny day ( I hope for you )
-
I can't seem to get this working. I am trying to scale a textfield (by letter) from the center, but whatever I change regOffsetY to, it always scales from the top left corner. What am I doing wrong? Thank you. Peter test.fla.zip
-
I was playing with paralax scrolling and found an old forum post about it following the mouse. The movement works well but I want to replace the pageX with the posistion of the div#viewPort offset. I tried a few things to get it and return it as a var but I couldn't get the doParallax function to read it. Any help is greatly appreciated.
-
Hello, I'm trying to get the offset properties of an element that is scaled and moved with Greensock. Unfortunately, under IE8 return values are wrong. How do I get this offset? Someone has already encountered this problem? Thank you for your help
-
I'm using TimelineMax to create an animation. I add tweens to it with, for example, the to-method. I know it's possible to set a label to a tween on the same line as adding it to the timeline like this: tlMain.to(sky, 2, { alpha: 1}, 'skyIn') ...and how to timeoffset a tween in the timeline by using [label]+=[value] or [label]-=[value]: tlMain // MOVE IN SKY + SNOW 0 .to(sky, 2, { alpha: 1}, 'skyIn') // fade-in sky .to(snow[0], 2, { alpha: 1}, 'skyIn+=0.5'); // fade-in snow 0.5 seconds after moving in the sky But what I would like to archive is: - add tween W with label A - add tween X with a timeline offset to label A - add tween Y with a timeline offset to the last added tween (tween X) ánd setting a new label for this tween ('Label B') - add tween Z wich starts at exactly the same time as tween Y, so the timeline position is 'label B' So I would like to add a tween to the timeline, add a NEW label this new tween and set a timelineoffset to this new added tween at the same time. So no offset to the given label, but an offset to the last tween, while giving it a new label at the same time. I tried a lot and looked for it in the docs and videos (like http://www.greensock.com/sequence-video/) but can't find a solution to this. Hopefuly you understand my question Is this possible? -
I want to tween various movieclips over the same path. My problem is I want them to be offset so that they follow the same path but still are at a distance from each other. I searched the forums but couldn't find any offset path property. Anything you can suggest?
