Jump to content
Search Community

dotun12

Members

  • Posts

    14

  • Joined

  • Last visited

 Content Type 

Posts posted by dotun12

    Same multiple scrolltrigger for different content

    in GSAP

    Posted

    I want to use the same animation and same trigger element for different content in a section.

      

    <section class="sec">
        <h4><span class="animation">Section content  1</span></h4>
        <p><span class="animation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida imperdiet</span></p>
</section>

<section class="sec">
    <h4><span class="animation">Section content  2</span></h4>
    <p><span class="animation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida imperdiet</span></p>
</section>

<section class="sec">
    <h4><span class="animation">Section content 3</span></h4>
    <p><span class="animation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida imperdiet</span></p>
</section>
    gsap.utils.toArray('.sec').forEach((sec, i)=>{
    let tl = gsap.timeline();
    tl.from('.animation',{duration:0.1, y:'100%', ease:'Power2.out'});

    ScrollTrigger.create({
        animation: tl,
        trigger: sec,
        markers: true,
        start: 'top top',
        end: 'top',
        scrub: 2
    });
});

     

    See the Pen VweVZwE by onseyi (@onseyi) on CodePen

    Onscroll move object on a path with MotionPathPlugin

    in GSAP

    Posted

    Hi there,

     

    I am trying to make a div(#rec) follow an svg path with I did in my below code but, I want the div to follow down, as I scroll down and follow back up as I scroll up, I will appreciate if you help work on the code below, Thanks

     

    https://codepen.io/onseyi/project/editor/DeWepm

      

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
body {
    margin:0;
    width: 100%;
    height: 3000px;
    background:#dfdfdf;
    overflow-x: hidden;
  }

#rec {
    position: absolute;
    width: 150px;
    height: 100px;
    background-color: #8894aa;

}
    </style>
</head>
<body>


    <div id="rec"></div>

    <svg fill="none" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 1300 3000">
        <path id="path" d="M143.78,431.83c103.76,235.99,223.54,324.48,318.04,360c143.34,53.87,223.51-16.03,379,51.84
	c136.54,59.6,292.87,208.71,272.99,325.44c-25.74,151.18-320.87,94.36-612.23,336.96c-155.68,129.63-367.75,392.59-331.29,624.96
	c43.59,277.79,443.64,520.03,985.93,492.48" stroke="black" stroke-width="8"/>
    </svg>
    
    <script  src="gsap.min.js"></script>   
    <script src="MotionPathPlugin.min.js""></script> 
    <script>
            gsap.registerPlugin(MotionPathPlugin);
            gsap.set("#rec", {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"});
            gsap.to("#rec",{duration:5, 
                motionPath:{
                    path:"#path",
                    autoRotate: true
                }    
            });       
    </script>    
</body>
</html>

     

    index.html

    Overlay Transiton with barba.js and gsap

    in GSAP

    Posted

    I am trying to make a simple overlay transition effect with barba and gsap. when I click on the Page 02 link the overlay transition effect move across the page from left to right but the page did not change, I will have to click on the link the second time for the page to change how can I fix this thanks.

     

      

    Barba.Pjax.start();

var FadeTransition = Barba.BaseTransition.extend({
  start: function() {
      Promise
        .all([this.newContainerLoading, this.fadeOut()])
        .then(this.fadeIn.bind(this));
  },

  fadeOut: function() {

      const TransitionPromise = new Promise(function(resolve){
        const OutTransition =  new TimelineMax();
        OutTransition
       // .set(".cover", {display:"block", y:"100%"})
        .to(".cover", 0.5, {width: "100%", ease: Power2.easeOut})
        .to(".cover", 0.5, {width: "0", left:"100%", ease: Power2.easeOut})
        //.set(".cover", {display:"none"});
    });
    return TransitionPromise;      

  },

  fadeIn: function() {
      let _this = this;
      //TweenLite.set(this.oldContainer, {display:"none"});
      TweenLite.to(this.newContainer, 0.1, {opacity:1, onComplete:function(){ _this.done(); }  });
  }
});

Barba.Pjax.getTransition = function() {
  return FadeTransition;
};

     

    See the Pen BayVWQa by onseyi (@onseyi) on CodePen

    Add Next and Previous Button to Scroll slider

    in GSAP

    Posted

    ZachSaucier, when I try to remove all line of code that as to do with the drag, the page was displaying blank, can you please point me to the part I need to remove thanks.

     

    below is the code section I remove

     

      
    // make the whole thing draggable
var dragMe = Draggable.create(container, {
  type: "x",
  edgeResistance: 1,
  snap: offsets,
  throwProps:true,
  bounds: "#masterWrap",
  onDrag: tweenDot,
  onThrowUpdate: tweenDot,
  onDragEnd: slideAnim,
  allowNativeTouchScrolling: false,
  zIndexBoost:false
});


<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/utils/Draggable.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js'></script><script  src="./script.js"></script>
     

    Add Next and Previous Button to Scroll slider

    in GSAP

    Posted

    Hi there,

     

    I am trying to add a next and previous button to the scroll slider (see codepen), so that when you click on next it move to the next slider page, and also maintain the scroll on the slider.

     

    I tried to add the below code but did not work


      

    <div class="controls">
    <button id="prevButton">Prev</button>
    <button id="nextButton">Next</button>
  </div>


var prevButton = document.querySelector("#prevButton");
var nextButton = document.querySelector("#nextButton");


prevButton.addEventListener("click", function()


  oldSlide = activeSlide;
  activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1);
  activeSlide = activeSlide < 0 ? 0 : activeSlide;
  activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide;


});

nextButton.addEventListener("click", function() {


  oldSlide = activeSlide;
  activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1);
  activeSlide = activeSlide < 0 ? 0 : activeSlide;
  activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide;


});

     

    See the Pen vYYeVeW by onseyi (@onseyi) on CodePen

×
×
  • Create New...