reheer

? Thank you for the explanation! I think I'm gonna be smart and follow your advice. Right now I have to concentrate on something else, but as soon as I have my definite solution I'll report back here. Have a great weekend! René

OK, when I use typeof I get number as result, for both parts and for the resulting sum. But I did change the tween to animate y. But I stil wonder why nothing happens when the trigger is firing at the new location. Is this expected behaviour? https://codepen.io/reheer/pen/gOMNbXq Thanks again!!

Hi Zach, By now my inner-nerd is kicking in. I want to know why things don't work as I expect them to. So the simpler solution is a last resort and the inner-nerd is saying no to that... I had a look at the start markers and got inspired: I put the image in the body, outside of the section. I set the top to a certain value, so it ends up in the third section. I created a timeline with a scrolltrigger to move the image to another location (for this demo it stays in view). On completion I refresh the scrolltrigger, and the markers move to their new location. Up to here I understand what is happening ? I can tell from the console log in the onEnter callback, that the markers have moved and that the scrolltrigger is working. But the timeline doesn't seem to do anything. Have you got an explanation for this? https://codepen.io/reheer/pen/vYKwamm

Hi Zach, Thank you so much for spending time on this. To show what I mean I created a very simple codepen with the code formatted ? I set the section to a fixed length. I placed the image where I would want them (sort of). The goal is to show the user that the page is scrolling downwards. This is not be easily visible with a plain, one color background. That's why I want to 'stick' images to the background. https://codepen.io/reheer/pen/YzWMKVq In the situation with the pinned section this simple solution is not possible because I cannot place the images in the correct spot I think? Hope this makes it more clear

I'm really enjoying myself trying to get this working ?, but it takes some time... So, I started this topic with the following explanation of what I wanted. I have this working in a different way than I thought it would work, but I'm happy with what I got so far. But if there is a beter way of doing this, I would be happy to learn more. https://codepen.io/reheer/pen/QWEPPNw Edit: autoscroll doesn't seem to work in the inline pen, so to see it working you'll have to open it in a new tab/window. At this moment the autoscroll works well, but it isn't really clear that something is happening unless you look at the scrollbar. So I came up with the idea to have an image that moves from the bottom of the screen in the same speed as the page is scrolling (and reappear at the bottom again). In a normal setting I could just place the image (or several) in a fixed place and wouldn't have to do a thing. But with the pinning of the section this doesn't really work. Any ideas how I could get this last part working? Thanks again, René

Hi Zach, Putting a viewbox on a group element is not valid. I read something about adding extra viewboxes and interpreted this incorrectly. Your side notes are saved into my memory ? My end goal was simulating a minimising window. And I think I already found the best way to do it (of course far simpler than my first attempt...) https://codepen.io/reheer/pen/eYzoOWb Thanks for your guidance!

Hi, I would like to change the size of part of a svg. This part (window6) is a group of 2 paths. I added a view box to the group based on the dimension in Inkscape. <g id="window6" class="window" transform="matrix(0.94471375,0,0,0.94471375,6.6607969,16.383778)" inkscape:label="window6" viewBox="73.400 300.987 176.533 314.540" style="display: inline" > I tried using this code: tl2.to("#window6", { attr: { viewBox: "73.400 300.987 1000 1000" }, }) but that doesn't seem to do anything. Is this possible? I understand that a codepen would be helpful but don't have time at this very moment to create one. If it is needed I'll create one tomorrow (CET time). Thanks, René

Hi Zach, Thanks for the welcome and your reply. So would this pin Layered pinning from bottom be a better starting point? Ah, I'm used to that (married with 3 daughters ?). I'll be doing some more reading and trial-and-error coding.

Hi all, I'm very new to GSAP, but (as always) full of ideas of what I would like to be able to do with new technologies I learn. In the linked codepen the 5 sections are looping. It is the 'Infinite fixed sections' mentioned in the ScrollTrigger documentation. What I would like to know is whether it would be possible to have only 1 section (of more) looping. I'm thinking about the following: The user scrolls down through the first section(s) Then the looping section is entered The looping continues for a set number of loops (eg. 5) or until the user clicks a button. The button should appear after 2 loops have ended. The effect of the button should ideally be an 'auto scroll' effect to the end of the page. So my question really is: is this possible and can anyone point or help me in the right direction? Thanks, René