Jump to content
Search Community

Absolute beginner move div to left

_youri test
Moderator Tag

Recommended Posts

Hi !

I don't understand why my code works ?
I thought my right div should be pushed to the center with a positive value instead of x: -1200,  like with css positioning ?
Also, is it possible to make this stuff responsive ? Always have those 2 divs centered, side by side, in the middle of my page ?

thank you for your help.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
height:3000px;
}
.boxleft {
background:url("404.svg");
width:400px;
height:400px;
position:absolute;
top:1500px;
left:-400px;
}
.boxright{
width:400px;
height:400px;
position:absolute;
top:1500px;
right:-400px;
}
</style>
</head>
<body>


<div class="boxleft"></div>
<div class="boxright">Stack Overflow est un site web proposant des questions et réponses sur un large choix de thèmes concernant la programmation informatique. </div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js'></script>
<script>
gsap.registerPlugin(ScrollTrigger);

gsap.to(".boxleft", {
  scrollTrigger: {
  trigger: ".boxleft",
  start: "top center",
  end: "center 400px",
  scrub: 1,
  markers: "true",
  toggleActions: "restart pause reverse none"
  },
  x: 800,
  duration:3
});
gsap.to(".boxright", {
  scrollTrigger: {
  trigger: ".boxright",
  start: "top center",
  end: "center 400px",
  scrub: 1,
  markers: "true",
  toggleActions: "restart pause reverse none"
  },
  x: -1200,
  duration:3
});

</script>
</body>
</html>

 

Link to comment
Share on other sites

Hey _youri. 

 

This is mostly a CSS question. I highly recommend that you not use absolute positioning if you want to center two things in your viewport, especially if you have other elements on the page. There are multiple other ways of centering things with CSS. I recommend creating a container element around the two elements you want to center and then centering that container.

 

Forget about the animation until you've got things centered correctly. Once they are and that's done in a responsive way then use a .from() animation to animate your elements from a starting position other than the center.

 

I highly recommend that you give that a try. If you run into issues you can't figure out then create a shareable demo for us using CodePen as this thread talks about. I went ahead and put the code you can into a CodePen which you can fork here

  • Like 1
Link to comment
Share on other sites

Ok I explain myself, each time I scroll I want to see the image and the text corresponding (same line) displayed at the same time.
The more I scroll, and the more I see image+text gathered in the center of the screen. I hope you see what I've got in mind ?
And between each group (image+text) they might be an .empty div of 400px height to separate each line.
Here .boxleft2 translate after .boxright2 .. Am I clear ?

Link to comment
Share on other sites

Yes, that makes sense. To do that it's probably easiest to create a container around each section that you want to animate in. Then loop through each of those containers and set up an animation and ScrollTrigger for each. I talk more extensively about how to do that sort of thing in my article about animating efficiently that I linked to earlier. 

 

I'd probably set it up this way:

See the Pen PozNYXo?editors=0100 by GreenSock (@GreenSock) on CodePen

 

I changed your HTML, CSS, and JavaScript a good bit so I highly recommend that you go through it piece by piece to learn and understand what each part is doing :) 

  • Like 3
Link to comment
Share on other sites

Just an addition to what Zach suggested , for this part of your question:

 

9 hours ago, _youri said:

The more I scroll, and the more I see image+text gathered in the center of the screen.

 

If i understand correctly, you want to link the progress of the animation to your scroll? If so, you can just use scrub:

 

See the Pen xxOVVaW?editors=1010 by neundex (@neundex) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...