Jump to content
Search Community

dotun12

Members

  • Posts

    14

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

dotun12's Achievements

2

Reputation

  1. dotun12
    Dipscom, I have done that but still did not work.
  2. dotun12
    thanks zachsaucier, I have made the change to ScrollTrigger.create but still did not work.
  3. dotun12
    Hi there I am trying to change the color of the menu, once I scroll to the a section, i try to toggle the class but did not work. secondly, I want to also scale the border line only in the menu on mouse, not together with the text, the text(menu) should not scale only the border line. thanks
  4. dotun12
    HI, I am trying to work on a page scroll effect with GSAP , I am imitation the exact below link (See imitation sample) also with the navigation arrow when click it scroll down to the next page and lastly can you help add auto scroll also. See imitation sample https://codyhouse.co/demo/page-scroll-effects/catch-hijacking.html I'd appreciate your help.
  5. dotun12
    Hi ZachSaucier, I added 'once: true', but did not work ScrollTrigger.create({ animation: tl, trigger: sec, markers: true, start: 'top top', end: 'top', scrub: 2, once: true });
  6. dotun12
    Thank, ZachSaucier, one more thing I want the content to appear once, not appear anytime scroll up or down.
  7. dotun12
    Hi ZachSaucier, I have added the codepen, if you notice when the scoller line get to the first start line it show all the content for all section, but I want it to only show the content for that section.
  8. dotun12
    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 }); });
  9. dotun12
    Thanks, ZachSaucier for your respond and mikel I am grateful.
  10. dotun12
    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
  11. dotun12
    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; };
  12. dotun12
    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>
  13. dotun12
    Thank ZachSaucier, I want to disable the drag, I only need the scroll and the next / prev button should I just remove this part of the code var dragMe = Draggable.create(container, {})
  14. dotun12
    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; });
×
×
  • Create New...