你好,
试图实现这个

在webflow中通过将它应用到一个现有的文本块类
但这行不通

代码被嵌入到与文本块相同的div中

   

我尝试了应用原始的方式,在文本中包含文本字符串:{value: " "}
但也没有成功

任何防止新手的指示都是感激的

要调试排除的Scrolltrigger函数,仍然不能输入

    

从控制台运行调试,但没有显示本节的任何内容,
如果有人有任何线索,我会非常感激。

哦,好的,所以你想获得文本的页面,然后你的代码上面应该肯定工作,我也测试了自己。

顺便问一下,你把整个JS代码放好了吗?
你有没有给那个typing_text在文本所在的元素上?因为你在使用getElementById元素应该有ID。元素也应该包含这些文本。

如果你已经考虑了这两个,它应该是可行的。请检查一下,如果有什么情况请告诉我。

const myTextElement = document.getElementById("typing_text");gsap.to(”。打字_text", { text: { value: myTextElement.innerText }, scrollTrigger: { trigger: ".section-typing_text", pin: ".typing_text-heading", start: "center center", end: "center top", scrub: true, markers: true } });

我们只有一个选择文本我们也可以这样做。

文本:myTextElement.innerText,
1像

我已经更新了CodePen,所以你也可以检查。

1像

再次感谢@abirana
是的,我已经定义了typing_text的ID


触发(".section-typing_text)因为我有一个combo类,为了简化,我使用了一个id:信息

我有在名称下运行的文本块打字它有两个内联类typing_text而且光标
光标闪烁功能有效,但其他功能无效
下面是代码

    

typing和scrolltrigger函数仍然不能工作

问题在第622行:

文字:myTextElement.innerText

如果我使用结束时
我收到这条信息


如果我使用;在行末,我得到了这样的消息:


如果我不使用我得到“意外标识符”在第623行

其余的错误与脚本无关,因为它从580行开始
我已经没有线索了,如果有人遇到这样的人,请告诉我一个像这样的新手
webflow不识别嵌套函数还是什么?

也知道如何运行脚本后HTML加载?
我已经尝试添加整个代码到webflow主设置自定义代码
页脚部分没有
异步函数
但除了别针功能还是不行
根据控制台,没有脚本相关的bug

更新:

我在主设置的页脚部分尝试了9种不同的方法

*第一个没有bug,除了引脚功能不工作

   

*3: Uncaught TypeError:无法读取null属性(读取' innerText ')

< >脚本gsap.to(”。typing_text", { text: myTextElement.innerText, scrollTrigger: { trigger: "#info", pin: ".typing", start: "center center", end: "center top", scrub: true, } } ); 

也尝试了延迟和稍后的异步包括在前面的设置

  

*1: Uncaught ReferenceError: gsap未定义

*2: Uncaught ReferenceError: gsap没有定义

*3: Uncaught ReferenceError: gsap没有定义

也试着扭转

  

同样的结果:Uncaught ReferenceError: gsap没有定义

我试图包括这在主要设置自定义代码页脚部分

   //这个必须出现在GSAP脚本和HTML元素之后

但是控制台日志没有显示任何相关的错误困惑:

只是提醒一下,这是GSAP论坛上的一个重复帖子。我们将让你在这里处理它,因为控制台日志没有启动-所以这似乎更多地与不理解如何在webflow中运行JS而不是GSAP有关

谢谢,但是我已经在GSAP论坛上打开了这个话题: slight_smile:

@barn

这里有相当多的东西您应该注意。

首先,如果你检查我CodePen你应该知道typing_text元素开始时没有任何文本。但是你从相同的文本开始,所以它不会动画。

在上一个脚本中,你提到了id这里应该是class。

另一件事是,我举的是垂直滚动的例子而你的实现是水平滚动的,这也是它不能工作的原因。

为此,你应该添加另一行ScrollTrigger设置:水平:真

不要只是复制粘贴代码,请尝试理解代码。如果你不注意,连一个都不见了逗号,足以让人头疼。

我在Webflow中做了一个例子也让它与水平布局一起工作。请在这里查看实时页面

你可以在这里查看Webflow项目https://preview.www.raktarban.com/preview/abirana?utm_medium=preview_link&utm_source=designer&utm_content=abirana&preview=abe5f6160428f4d149c74ceab76a201b&pageId=62fcbafa49d3fedaad92880a&workflow=preview

顺便说一下,我对每个ID和类的命名都是不同的,所以您应该不会有问题。您可以在页面设置中找到自定义代码。

请检查一下,如果有什么情况请告诉我。

1像

谢谢@abirana观察你的webflow代码一定程度上是有意义的: slight_smile:文本输入源必须与输出不同,所以如果我必须使用2个不同的文本块

太好了,我希望你现在能成功。

让你们知道,还有一种更好的方法用ScrollTrigger实现水平滚动但这需要更多的工作。如果你想,你应该在这里查看更多信息

你的代码正在工作: slight_smile:,然而我的网站方向是垂直的,它可能看起来水平,因为我还没有整理出流体设计


它如何水平打字?
我使用相同的代码和相同的风格设置在Webflow

谢谢@abirana,我试图理解,因此,只是澄清什么是正确的方式引用id在webflow脚本是它开始我知道这门课是从一个点开始的

更新:排序
必须定义最小和最大字符吗: slight_smile:

@abirana是否可以使用此脚本同时进行垂直和水平滚动
因为我有网站,有bof和垂直,它工作,但当我试图应用它的水平,它不



两边都试过了
水平:没错,
而且
/ /水平:没错,
两者都有相同的结果,截图显示

垂直滚动起作用了


截图2012-09-03 14.48.54

在哪里
触发:“信息”,
在标题中

但是当我尝试添加另一个组合类“about”到头部
这可能是它无法识别的水平滚动的触发点

如何可能有多个ScrollTriggers?任何建议表示赞赏

阅读链接:Webflow - k∞
连接:Webflow - k∞