Search the Community
Showing results for tags 'sections'.
Found 8 results
-
Hi everyone, I have 4 sections. I need to make transitions between them. The second section should run over the first, and the third on the second as in first demo, but between the third and fourth transition should be like in second demo, when the third section goes to the top and opens the fourth section under it. I don't understand how this effect can be achieved https://codepen.io/GreenSock/pen/KKpLdWW https://codepen.io/GreenSock/pen/BaowPwo
-
Hey guys, i am trying to make an x amount of sections and i want each section to have its animation. The only thing is that i don't know how to adjust the height (or duration) for each section because i want each section's duration to vary. For example, in the codepen i provided i'd like: 1. for the first section to scroll 2000px , during that time the svg elements will move at a different speed upwards creating a parallax effect 2. for the second section the svg camera is coming up on top of the first section and zooming in its squared display (by scaling up the camera), at which point when the display's border touches the screen's viewport width the third section will appear from the center. So its duration should be longer than the first section's duration. Basically i want absolute control over the entrance and exit points of each section as well as their duration. I messed around with the start and end values of each section quite a lot and i can't wrap my head around it. Any help is greatly appreciated!
-
I created a simple vertical scrolling page with different sections. I would like to display the title for each section with a fixed position when the section is in the viewport. I have an issue in the first section (orange). The position of the title is broken. I'm not sure but perhaps it's related to the HTML element .pin-spacer. I'm new in GSAP and not really sure that my code is ok with what I'm trying to achieve. Any help would much appreciated, thanks.
-
Hello Scrollers ! First time I ask for some help on the forum, but I'm a bit stuck at the moment with my portfolio's slider. The idea is to have the thumbnail on the left, and the infos on the right. Everytime the user scrolls 100vh, the thumbnail and the infos change. this Codepen I found this codepen, which is close to what I am trying to achieve, but I still have three problems : I don't understand how, but the right side of the animation doesn't work properly. The first element should be at top:0 when the animation starts ; When the user scrolls, my element starts by going down, and then up, but it should directly go up ; I cannot figure out how to pin the right element until the user scrolls 100vh everytime + I don't understand why the other elements are still in opacity: 0, and not visible on screen. If anybody could enlighten me, it would be nice ! Thanks, A GSAP newbie
-
Hi all, first time posting here so sorry if I forget to include something, but here we go... I'm trying to animate this SVG between different sections (wrappers) but I can't figure out why my animation keeps restarting from the original position (the top of the body). I'd like to animate the SVG from the previous position. So if you scroll from wrapper 3 to wrapper 2, the SVG animates from wrapper 3 to wrapper 2. I'm feeling like I'm overseeing the obvious solution here, but I can't from the life of me come up with a solution. Any help is appreciated!
-
Hey guys, I have an issue an I'm looking for help. I have a page that has a parallax effect in all of the sections of a page whenever the user scrolls. So there are this black text blocks that are separated but whenever you scroll one of the blocks moves up to be next to the one on top, the issue is that this is causing a blank space between sections of the page. I want to know if there is a way, whenever the black text block moves up, to make the sections below move up as well, basically follow that text block whenever it goes up. I try this by just using a yPercent on the sections below, but is is just causing a blank space to be left on the bottom of the page Here is a link of how the animation should work https://drive.google.com/file/d/1EsKinyuID5buWKhQllRhE1Bmc6el5GTX/view and I left a codepen with the basic markup of my current pate. Any help would be appreciated.
-
Hey, I'm currently working on a project with GSAP and scrollmagic. I want to create sections that has scroll animations inside with scrollmagic. So a section freeze for the time other animations came into. Is this section over it should smooth scroll to the next section. I call that somehting like scrollytelling. 1. each section has a story like on scroll there are elements that coming in part a part. 2. if a section has ended the story it should scroll to the next section without effects, like a normal onpager 3. it should be navigatable via next/prev buttons and dots for each section 4. all sections sould be responsive, so I can create querys for tablet/desktop/XL-desktop screens Here the stack where I have a screenshot and detailed information: Stackoverflow I attached a codepen with sections and the beginning of my scrollmagic. Maybe someone has done a similar project or could help me a bit. I want to show first results until the end of next week. Here is a image how it should look: http://codepen.io/muuvmuuv/pen/PbXXXr
-
I am trying to animate full page(100vh) sections to the viewport and its not working. You can view this same demo http://testanim.bitballoon.com/ (click on "x" icon). As you can see the section that animates into view is visible for a few seconds when it is animating and its opacity resets to zero again from the x position. I would like the section pages to remain visible until I click a button to animate it out of view and sets opacity to zero I don't know what I am doing wrong . Regards.
