Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Page Tailoring

Members
  • Content Count

    13
  • Joined

  • Last visited

Community Reputation

5 Newbie

About Page Tailoring

  • Rank
    Member
  • Birthday 06/20/1980

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Warsaw / Poland

Recent Profile Visitors

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

  1. And ALL problems solved! https://greensock.com/docs/v3/Plugins/ScrollTrigger It's look great, thank you GSAP Team, I'm going to test it
  2. I know that demo is best, but it takes time especially with such an extensive project. Thank You for help.
  3. I have done this like this: slideAnim[1].timeScale(2).play(); setTimeout(() => {slideAnim[2].timeScale(2).play();}, slideAnim[1].duration() * 0.5 * 1000);
  4. (same person, on to accounts :) Is complicated, it is quite long code. It is page o swiper and I wrote separate animations to change all slide. When i going forward I'm using slideAnim[x].play(), when going back slideAnim[x].reverse(). I have 13 steps. It's working perfect when I moving one step, between slides. Now I'm traying make animations for step n slides. I have some basic function for this: function handleAnimations(previusSlide, activeSlide) { console.log('f: handleAnimations'); if (activeSlide > previusSlide) { console.log('active -> ' + activeSlide);
  5. Hi, how to do it in gsap3. this don`t work var tl1 = gsap.timeline(); tl1.to(...); //add whatever animations. var tl2 = gsap.timeline(); tl2.to(...); //add whatever animations var tl3 = gsap.timeline(); tl3.to(...); //add whatever animations; var master = gsap.timeline(); master.add(tl1).add(tl2).add(tl3); //now you can control everything with master! //jump to the middle of the entire sequence, for example master.progress(0.5); i have: const longTime = .6, time = .3, shortTime = .15, longOverlap = '-=0.6', overlap = '-=0.3', shotOverlap =
  6. Hi, all I resigned from "animations.gsap" ScrollMagic plugin and handle this like that: import { gsap } from "gsap"; import ScrollMagic from 'ScrollMagic'; const controller = new ScrollMagic.Controller(); const easeInOut = 'circ.easeInOut'; const time = .5; const menuAnim = gsap.timeline({defaults:{ease: easeInOut, duration: time}}) .to('nav', {y: '-100%'}) .to('#logo', {opacity: 1}, "-=0.4") .to('.main-nav', {opacity: 1}, "-=0.4") ; menuAnim.pause(); new ScrollMagic.Scene({ triggerElement: '#home', duration:0, triggerHook: .85
  7. @PointC yes, adobe XD giving a crazy number, that are coordinates for the whole document, not for the exported group of paths. I have a new file with smaller coordinates. But still, I don't know how to move a path. Now I have translate(81.157 34.104) and I want to add 50 to x. (thx @OSUblake) <path id="Path_23" data-name="Path 23" class="cls-3" x="0" y="0" d="M585.648,443.9q-4.442,0-5.492-3.826l-17.472-59.584q-1.667-5.921-7.836-5.923h-1.975a1.759,1.759,0,0,0-1.727,2.222l18.768,64.329q3.083,10.986,15.734,10.986c.11,0,.205-.014.313-.017v-8.227c-.113,0-.2.038-.313.
  8. Hi, I'm trying animate SVG path with attrPlugin. I can't find any docs about it. Can I use Attr Plugin to move path exatly x:30? Path is from Adobe XD export. Path like this for exemple: <path id="Path_23" data-name="Path 23" class="myGreen" d="M601.019,474.723q-6.417,0-7.933-5.526l-25.239-86.07q-2.408-8.553-11.319-8.555h-2.854a2.541,2.541,0,0,0-2.494,3.21l27.111,92.925q4.454,15.87,22.728,15.87c.158,0,.3-.02.452-.025V474.667c-.163,0-.287.055-.452.055" transform="translate(-3723.339 3675.66)"/> this dosen't work:
×