thomas-12345
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by thomas-12345
-
-
@Rodrigo This is a really great example, thank you so much. It will me a while to unpack what exactly is happening here. One concern I have with it though is that when I reduce the number of <li> down to 5, the animation breaks, and I cannot figure out why. There's just a lot going on here and I'm struggling to figure that out.
-
@Cassie This is the thread
-
I have started with the card carousel
See the Pen rNZvKNJ by thomas-hibbard (@thomas-hibbard) on CodePen
, and altered it use a class so I can more easily drop it into a Vue app. However I am really struggling with a few things:1. I want there to be two separate levels of scale reduction. One foreground scale=1 card, surrounded by two at smaller scale and then a third tier at a smaller one yet, farthest from the center.
2. I want, as an element disappears off the stage at the right, to appear on left stage and vice versa
For the first idea, I have tried setting the scale in the initCell method with
let scale: number = 0.6;
if ([0, 6].includes(index)) {
scale = 0.3;
}which sort of has the right idea, but really just falls apart because only the cells that are set to 0.3 initially go back to that size as the animation progresses.
The second idea, I'm really at a loss for. I did an implementation of this design where each forward/backward tick was its own timeline with a repeat of "1", and doing the animation like I was able to clone cells onto the DOM that had correct innerText for what would be rotated onto the visible stage with the next previous or next button click. This doesn't work at all with the animation I've used as a starting point for this attempt.
I would be grateful for any help here. Thank you.
See the Pen JjavMdy by thomas-hibbard (@thomas-hibbard) on CodePen
-
@cassie yeah that was poorly worded; i've started a new thread with something a little closer to what I'm trying to do.
-
@Jack Got it, thank you!
- 1
-
I'm trying to understand the above pen, but am just not getting exactly what is happening. The fist especially confusing bit is in the initCell function
var tl = gsap.timeline({ repeat: 1 })
.to(element, { duration:1, x: "+=" + wrapWidth }, 0)
.to(element, { duration:cellStep, color: "#009688", scale: 1, repeat: 1, yoyo: true }, 0.5 - cellStep)
baseTl.add(tl, i * -cellStep);It seems to say, first move each element left the wrapWidth, then increase its scale to 1.
Questions:
1. Why would a cell move the entire wrapWidth? Why is it not just moving the width of one cell?
2. What exactly is the 0.5 - cellStep positional argument doing here. Does this somehow orchestrate all the cells moving together?
3. Why does each individual timeline have a position argument in the second
to
, and also thebaseTl.add
has another position argument?The other unclear syntax (for me) is this animation initialization:
var animation = gsap.timeline({ repeat: -1, paused: true })
.add(baseTl.tweenFromTo(1, 2))
animation.progress(1, true).progress(0, true);It appears to animate the base timeline only between the 1 and 2 second marks, which, I don't even see a declaration of a duration in when the base timeline is created:
var baseTl = gsap.timeline({ paused: true })
; but I'm not understanding theprogress(1).progress(0)
. Also: removing the second call to progress, the animation appears to work the same. I'm curious what it is doing, but also curious if it's actually necessary.Overall this seems to nest three timelines, the last nesting three timelines attached to each of the eight cards
- var animation -> var baseTl -> var tl: timelines (8 of them)
I don't really understand this orchestration, can someone explain how these three timelines operate together?
Thanks very much
See the Pen Jjavyvv?editors=1010 by thomas-hibbard (@thomas-hibbard) on CodePen
-
On 2/20/2020 at 2:58 PM, ZachSaucier said:
Hey Joris and welcome.
You've got a couple of JS error in the bottom part of your JS.
I'm curious - why use a proxy at all in this case? Here's how I'd do it.
@ZachSaucier I have seen carousel examples that include an empty <div class="proxy"/> element in the html, or use javascript to create a "proxy" element, then use that as the `Draggable.create(proxy, options)` Here's one you worked on (
). What is the purpose of the proxy? Where can I learn more about techniques like this?
-
On 8/5/2016 at 11:17 AM, OSUblake said:
Sometimes documentation can be incomplete or hard to understand. If you're having doubts, try it.
pen is 404
-
On 8/1/2018 at 12:05 PM, PointC said:
If snap and ThrowProps aren't working it almost sounds like that plugin isn't loaded. If you could drop it into a demo, that would be great. Here's a GS draggable starter demo that loads what you need. Please fork it and see if you can reproduce the problem with your code.
Happy tweening.
Adding a snap property to this draggable with just a log statement, doesn't log anything. Is that correct?
Cannot Animate `x` (Pan) and `scale` (Zoom) on SVG Concurrently
in GSAP
Posted
I'm have a panoramic SVG with three main focal points. I style it to be wider than the user's monitor, and the idea is as they advance from one position to the next in the UX, the SVG will pan to center each of those three points to give the impression of moving along the X-axis. I'm also zooming in and out when the "frame" changes.
I can calculate the center of each focal point and provide GSAP with an x coordinate describing how it should transition left to give the impression of forward motion. I use `scale` for zooming. However, I must to provide a positive `position` property to the `.to()` to ensure the two events don't happen at the same time, or the transform-origin causes problems: It's not linear forward movement; the animation tugs back and forth. I think it would be better looking if both props animated at the same time.
I have tried adding an `onUpdate` callback attempting to adjust the transform origin as the animation progresses, but it doesn't work at all. something like:
const setTOrigin = gsap.quickSetter(this.selector, 'transformOrigin')
onUpdate: () => {
// const currentOrigin = gsap.getProperty(this.selector, 'transform-origin')
setTOrigin(`${animation.progress() * centers[1]}px`) // centers is an array of the focal point centers coords
}
Not sure this is even a good idea. Just something I tried.
What I have, technically works. But it is pretty janky. And again, doesn't provide the option to use negative positions to make the animation quicker and smoother.
I've made a minimal reproduction here hoping someone can offer some guidance:
Thanks for any insight.
See the Pen RwqbymO by thomas-hibbard (@thomas-hibbard) on CodePen