Shaun Gorneau

Hi @violacase, Here it is with GSAP 3 syntax. https://codepen.io/sgorneau/pen/abjmzvW Happy New Year!

LOL, no! 🤣 I was just wondering if the was an under-the-hood (undocumented) method

So, I'm using Draggable to move around a map that is larger than the viewport and bound to a container. That works perfectly. I have hotspots on the map that reveal info cards. When I click a hotspot, I would like to programmatically perform a drag as if I manually dragged the map from the "mousedown point" to the center of the screen. .to() works fine but doesn't respect the Draggable bounds (for obvious reasons). Is there a way to pass coordinates to a Draggable method such that it respects everything about the Draggable instance (bounds, inertia, etc.)? Thanks Superheros!

Hi @noesiscsd, The problem I see here is that two tweens are fighting. Because you've already offset the content that needs to move from "off canvas" to the left, you only have to move it to 0, and then repeat that process. Because we're using a set() here ( rather than a fromTo() ), you'll want to repeat the timeline, not just the tween. Also, due to margins and padding, there is a skip ... so I added a buffer to the x value. https://codepen.io/sgorneau/pen/VwrVPbj?editors=0010 Hope this helps! Shaun

Hi @aleangelico, Yes absolutely. But I'm unsure what you're trying to achieve ... you have what appears to be conflicting stuff going on. Here is an example of properties being tweened during the duration of a longer tween. https://codepen.io/sgorneau/pen/rNYprdo?editors=0010

Hi @Jay George P, I'm wondering what you're testing on, because it's very smooth here.

Hi @fionchadd, I don't see anything wrong with multiple triggers so long as, like your second example, you can wrap it in a loop to build it out for you. Your second example is very close, the only thing was you were not adding the necessary pixel offsets to the `start:` as you did in your first example. This should do it (plus it's a bit simplified). https://codepen.io/sgorneau/pen/WNXXKVY?editors=0010 Hope this helps! Shaun

Any chance you could send a URL to the project? Even if in a private message. I have a feeling this is rubber banding in Mac OS ... are you testing this on a Mac and, if so, which browser(s)?

You're welcome!

Hi @Nwekar, Here is a great tutorial on how to use text as a mask. https://css-tricks.com/how-to-do-knockout-text/

Hi @initium, Moving an image from the bottom can be handled by translating the image on the Y axis from either off below (meaning the height of the viewable area) the viewable area to 0 or on the viewable area (0) to off the top (minus the height of the viewable area). Here is a verbose example to show you what I mean. https://codepen.io/sgorneau/pen/oNoodpo?editors=0010 In a practical execution you'd want to compute things like the viewable area height and wrap the timeline buildout in logic to accommodate any number of slides and any variation on height/width. Hope this helps! Shaun

My guess would be that .box elemets are not children of .boxes in your code. I'd have to take a look to really know.

Curious which browser you're testing in. I've looked at this in Safari, Chrome, Firefox, and Edge in MacOS and the first frame of the tween loads in all cases without the need for any input.

Excellent! Happy to help.

Hi @Christiemade, The thing that stands out the most to me is that you're tying the tween to `scrub`, meaning it takes scrolling to progress the tween. If you just want them to appear, you can remove that. Also, you don't have to define each tween separately since they share the same selector and are tweening the same properties. You can offset them with a stagger. Have a look, https://codepen.io/sgorneau/pen/abVVowa?editors=0010 Lastly, if you're going to tween a property that you've defined in CSS (opacity in this case), it's best to pull that out of CSS and either use a set() or fromTo() in GSAP. This is especially true for transforms. And, while opacity is certainly valid, it's best to use the GSAP special property "autoAlpha" as it handles both opacity and visibility. Hope this helps! Shaun

Happy to help!

Hi @Walek, Have a look at svgOrigin https://codepen.io/sgorneau/pen/oNwBJmj?editors=0110

Wow ... i guess we all hit submit at the same time! 🤣

Hi @Joe165, You can look into Window.matchMedia() https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia to check conditions to determine how/when you want certain tweens/timelines to fire.

It's the position parameter. It tells the tween when to happen in the overall timeline ... absolute timing in terms of seconds from the beginning, at a defined label, or relatively from the previous tween (amongst other things). Have a look here, Note, I used a timeline with the idea that you would have a lot more happening that might require sequencing. This could be done with two separate tweens which would not require any positioning since simple tweens aren't sequenced in any way. https://codepen.io/sgorneau/pen/rNwLbOE

Hi @flefloch, The reason for this is that CSS transforms do not disrupt flow. The parent element still sees it in its original position and behaves accordingly So, there are a few ways you could handle this. You could change the element's position property to absolute after the tween, that way the parent is sized based on the new flow. https://codepen.io/sgorneau/pen/OJgXqLM Or you could tween the parent's size (depending on how dynamic this scenario is). https://codepen.io/sgorneau/pen/powbYzr There are certainly other ways to handle this depending on the complexity of the overall scenario. Hope this helps! Shaun

The best way is to learn the fundamentals and then start with small projects; projects with one goal. More complex projects are really many small projects that work in concert. You can sign up for e-classes or even learn from YouTube videos.

It's Javascript errors. Reducing your Javascript code to the basics for this shows that your code above works just fine. https://codepen.io/sgorneau/pen/WNOrMKE

A few quick things. 1. There are errors all throughout the HTML (within the SVG markup), CSS, and Javascript. 2. There is far too much going on to truly get a grasp of what you are trying to do and, furthermore, help you achieve that. Simplify the problem down to the basics and we can help you from there. That doesn't mean you won't get answers to the more complex workings, it will just help us to provide answers that you can build on. Shaun

There's a few ways you can do it ... If part of a timeline, give that tween a longer duration. You could also affect the timescale ... but, without more information, I think a longer duration would be a better fit. Another option is to define an end value that is over a large pixel (or a calculated) value.