Jump to content
Search Community

_youri

Members

  • Posts

    20

  • Joined

  • Last visited

 Content Type 

Posts posted by _youri

    conflict into a script file

    in GSAP

    Posted

    Hi all !
    Right now I need 2 scripts in the same js file :
    First one called in my index.php file
      

    /////NAVIGATION//////////////////////////////////////////////////
	Draggable.create(".vignettes", {
		bounds:".h-content",
  allowNativeTouchScrolling:false,
		type:"x",
    throwProps: true
		}
)

gsap.set("body", {overflowY:'scroll'});

var scrollSpeed = 0.5; // half of user scroll
var scrollHeight = 10000;

gsap.set("body", {height:scrollHeight, overflowY:'scroll'});

$(document).on("scroll", function (){
  const pixels = $(document).scrollTop();
  gsap.to('.vignettes',1,{x:-0.5 * pixels})
  
   //'0.5' = half speed of user scroll
  console.log(pixels);
})

    Second one called in my apropos.php file
      

    /////A PROPOS SPLITTEXT////////////////////////////////////////////////

var tl = gsap.timeline(), 
    mySplitText = new SplitText("#quote", {type:"words,chars"}), 
    chars = mySplitText.chars; //an array of all the divs that wrap each character

gsap.set("#quote", {perspective: 400});

tl.from(chars, {duration: 8.8, opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50",  ease:"back", stagger: 0.01}, "+=0");

console.log(mySplitText.version);

    The first one seems to disturb the second one. I don't understand why ...

     

    scrolltrigger with smooth scrolling and Locomotive

    in GSAP

    Posted

    Hi,
    For my website I'm trying to use the code from snorkl.tv in order to have a smooth scroll : https://www.snorkl.tv/scrolltrigger-smooth-scroll/
    I've created the div with a class="scrollContainer" and used the proxy method but I'm stucked. Because my timeline is broken. Here is a Pen of my code.
    Where am I wrong ? You should open the pen in a new window as my div have width bigger that the display in Pen !

    See the Pen LYZxZPW by _youri (@_youri) on CodePen

    flip image

    in GSAP

    Posted

    Hi,
    I've found this Pen on the forum. And I wonder how to modify the code to flip the image "only" when pointer is over the image ?
    Actually I'd like to apply this flip effect on 2 images independently. I mean eachone can be flipped.

    Thank you !
     

    See the Pen PPOdmw by emanuelbaran (@emanuelbaran) on CodePen

    Absolute beginner move div to left

    in GSAP

    Posted

    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 ?

    Absolute beginner move div to left

    in GSAP

    Posted

    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>

     

×
×
  • Create New...