标签: gsap

我在 javascript 中创建了一个“60 秒”倒计时器，我试图弄清楚如何使它不“跳跃”。主要问题是字体字符的宽度不一致。我认为解决这个问题的唯一方法是以某种方式将每个字符附加到它自己的 div 中，并通过 css 控制该 div 的宽度。但我不太确定该怎么做。有更好的方法吗？

我知道 Greensock 的“TweenMax”插件可以处理这个问题，但我想自己创建这个，而不是使用库来做一件小事。

jsFiddle：** http://jsfiddle.net/oneeezy/3CreM/1/

HTML：

<div class="row">
    <span class="timer timerback">00:00</span>
    <span id="Timer" class="timer timerfront">60:00</span>
    <span class="seconds">Seconds</span>
</div>

JavaScript：

var count = 6000;
var counter = setInterval(timer, 10);

function timer()
{
    if (count <= 0)
    {
        clearInterval(counter);
        return;
     }
     count--;
     document.getElementById("Timer").innerHTML=count /100;
 }

我有一个Swiper滑块和一个像"1/10"的计数器位置.我想用动画改变当前的幻灯片编号(1).我知道如何替换这个数字,但是这个动画就像另一个故事:

正如你在gif上看到的那样,如果我在我的滑块上适度点击它会很好地工作,但是当我双重三重或疯狂地点击下一个链接时,完全打破了计数器,因为在这个gif示例中做了克隆.
你知道我怎么能以更好的方式做到这一点？

我做了一个jsfiddle,只为第一次改变工作:
- http://jsfiddle.net/asb39sff/1/

// Init
var $c_cur = $("#count_cur"),
    $c_next = $("#count_next");

TweenLite.set($c_next, {y: 12, opacity: 0}, "count");


// Change counter function
function photos_change(swiper) {
    var index = swiper.activeIndex +1,
        $current = $(".photo-slide").eq(index),
        dur = 0.8,
        tl = new TimelineLite();

    // Just a test
    tl.to($c_cur, dur, {y: -12, opacity: 0}, "count")
      .to($c_next, dur, {y: 0, opacity: 1}, "count")

    //$c_cur.text(index);
    //$c_next.text(index + 1);
}

所以我发现了这个令人惊奇的codepen动画,它通过<text>标签使用(GSAP我想)为任何文本提供"水填充"效果.

Codepen截图如下 点击此处获取CODEPEN

我的问题:我如何使用.PNG图像而不是HTML文本来实现相同的结果？

例如

而不是当前的代码: <text id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" font-family="'Cabin Condensed'" font-size="161.047">LOADING</text>

我当时希望做更多的事情

<img src="LOADING.png" id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" width="569" height="186">

加载.PNG IMG的示例可以使用:( 与<img>上面的代码片段相同的尺寸)

谢谢你的帮助!不是最好的这个东西,并希望使用效果!

如果效果更好,这是上面发布的png文件的SVG:imgh.us/loadingpng.svg

我试图制作一个带视差的文本但失败了.代码似乎无害,似乎没有做错什么,但滚动的外观和感觉是非常错误的.

标记是这样的:

<!-- content above -->
<section class="section-parallax">
  <div class="container text-center">
    <div class="flex-row-columns">
      <div class="flex-row">
        <h2 class="heading flex-8">
          <span class="heading-sub">Some Header</span>
          <span class="heading-bottom">getting also long<sup>
        </h2>
      </div>
    </div>
  </div>
</section>
<!-- content below -->

样式如下:

.container {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 1400px;
}

.text-center {
  text-align: center;
}

.section-parallax {
  background: black;
  overflow: hidden;

  &,
  & .container,
  & .flex-row {
    min-height: 545px;
  }

  & .container {
    transform: translate3d(0, -100%, 0);
  }
}

.flex-row-columns …

我想知道是否有一种方法，以及如何实现，以某种gsap方式固定一个元素，但使用 FRAMER MOTION。为了做类似的事情：

https://codepen.io/hexagoncircle/pen/LYpaPQp

提前致谢 ！

我想在演示文稿中添加一些简单的动画。我使用 GSAP (TweenMax) 来完成这项工作。我对动画设置没有问题，但是这些动画会在演示开始后立即触发。

我如何控制它，以便仅当带有动画的幻灯片处于活动状态时脚本才会执行？

欢迎您的所有帮助。问候！

编辑：

好吧，看起来阅读图书馆的文档至少可以回答 90% 的这类问题。对于懒惰的人（像我一样:)）这是我发现的：

要检查幻灯片何时更改，我们使用：

 Reveal.addEventListener( 'slidechanged', function( event ) {
    // event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );

在我的animeScript.js 中，我只是链接事件，就像：

Reveal.addEventListener( 'slidechanged', function( event ) {
    myTween();
} );

如果我们想针对特定幻灯片，我们data-state在<section></section>标签中使用参数，例如：

<section data-state="slide2">
  <img id="logo2" src="images/logo.png">
  <h2>No Theme</h2>
  <p>There's no theme included, so it will fall back on browser defaults.</p>
</section>

并链接animeScript.js中的状态，如：

Reveal.addEventListener( 'slide2', function() {
  myTween();
  TweenMax.to(logo3, 1,{opacity:1, delay:1.5});
}, false );

问候！

我尝试在 TweenMax 中完成动画之前停止动画。最初 div 顶部为“0px”。我将其动画设置为在 3 秒内到达顶部“90px”。如果我点击按钮我想停止它。如何获得？

    TweenMax.to("div", 3, {
        top: '90px',
    }); 
    <div id="stop">stop</div>

我正在尝试ScrollTrigger与 Next.js一起使用：

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

我收到此错误：

有没有人有这个问题的解决方案？

我正在尝试在我的网站上实施Barba JS和GSAPReact。

作为参考，我在这里遵循了这个视频教程，当然这个教程不在React.

这是我的文件夹结构，其中显示了此过渡效果的所有相关文件：

theme
  public
    index.html
  src
    components
      Header
        Header.js
    pages
      Homepage
      Contact
    utils
      anim.js
      helpers.js
  App.js
  index.js

我安装了以下软件包：

• gsap - 版本3.8.0
• @barba/core - 版本2.9.7

当前结果

• 没有控制台错误，也没有编译错误。

• 切换页面时，没有过渡。几乎感觉像是barba没有启动。

演示：

由于演示涉及到一些文件，我在这里创建了一个codesandbox。

编辑：

已更新我的barba转换代码并添加了debug: true. 然后，当将鼠标悬停在我的联系页面按钮上时，控制台会显示错误：[@barba/core] Error: Fetch error at XMLHttpRequest.o.onerror？

import { pageTransition } from "./helpers";
import barba from '@barba/core';

export function delay(n) {
  n = n || …

你好，我亲爱的伙伴们，

我一直在尝试重新创建效果：当鼠标靠近https://www.davidwilliambaum.com/上找到的图像中心时，图像会放大

到目前为止我一直很不成功，因为我不知道如何解决这个问题。

我带着一些想法开始了一个codepen：https://codepen.io/dindon-studio/pen/RwLwRKM

正如你所看到的，我首先获得图像的中心坐标，然后尝试一些肮脏的公式来根据鼠标距离来缩放它。但这是非常错误的，而且根本没有说服力。

有人有更好的方法吗？深深感谢您的帮助！

var mX, mY, distance, element
element = $('.project')

function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2))); }

$(document).mousemove(function(e) {  
mX = e.pageX;
mY = e.pageY;
distance = calculateDistance(element, mX, mY);
if (distance< 500 && distance >50){
   var scaling = 1 + (1/distance) *100

  gsap.to(".project", {duration: 0.01, scale: scaling,ease: "power2.in",});

  }
 });